नियंत्रक में डेटा को बदलने के लिए सबसे विश्वसनीय और तकनीकी रूप से सही दृष्टिकोण है। यहाँ एक सरल कार्य और उपयोग है।
function chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
$scope.chunkedData = chunk(myData, 3);
तब आपका विचार इस तरह दिखाई देगा:
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
यदि आपके पास कोई इनपुट है ng-repeat, तो आप संभवतः सरणियों को अनचेक / रिजेक्ट करना चाहेंगे क्योंकि डेटा संशोधित या सबमिट किया गया है। यहाँ है कि यह एक में कैसे दिखेगा$watch , ताकि डेटा हमेशा मूल, मर्ज किए गए प्रारूप में उपलब्ध हो:
$scope.$watch('chunkedData', function(val) {
$scope.data = [].concat.apply([], val);
}, true); // deep watch
कई लोग इसे फ़िल्टर के साथ दृश्य में पूरा करना पसंद करते हैं। यह संभव है, लेकिन केवल प्रदर्शन उद्देश्यों के लिए उपयोग किया जाना चाहिए! यदि आप इस फ़िल्टर किए गए दृश्य के भीतर इनपुट जोड़ते हैं, तो यह समस्याओं का कारण बन सकता है उन जिन्हें हल किया सकता है, लेकिन सुंदर या विश्वसनीय नहीं हैं ।
इस फ़िल्टर के साथ समस्या यह है कि यह हर बार नए नेस्टेड सरणियों को लौटाता है। कोणीय फिल्टर से रिटर्न वैल्यू देख रहा है। पहली बार फ़िल्टर चलता है, कोणीय मूल्य जानता है, फिर यह सुनिश्चित करने के लिए इसे फिर से चलाता है कि यह बदल रहा है। यदि दोनों मान समान हैं, तो चक्र समाप्त हो गया है। यदि नहीं, तो फ़िल्टर बार-बार आग लगाएगा जब तक कि वे समान नहीं होते हैं, या कोणीय को पता चलता है कि एक अनन्त डाइजेस्ट लूप घटित हो रहा है और नीचे बन्द हो जाता है। क्योंकि नए नेस्टेड एरेज़ / ऑब्जेक्ट्स को पहले से कोणीय द्वारा ट्रैक नहीं किया गया था, यह हमेशा रिटर्न मान को पिछले से अलग देखता है। इन "अस्थिर" फिल्टर को ठीक करने के लिए, आपको एक मॉड्यूल में फिल्टर को लपेटना होगा और स्क्रिप्ट को या उसके साथ संकलित करना होगाmemoize फ़ंक्शन । lodashएक memoizeफ़ंक्शन होता है और लॉस्ट के नवीनतम संस्करण में एक chunkफ़ंक्शन भी शामिल होता है, इसलिए हम इस फ़िल्टर को बहुत ही सरलता से उपयोग कर सकते हैंnpmbrowserifywebpack ।
याद रखें: केवल प्रदर्शन! नियंत्रक में फ़िल्टर करें यदि आप इनपुट का उपयोग कर रहे हैं!
दर्ज करें:
npm install lodash-node
फ़िल्टर बनाएं:
var chunk = require('lodash-node/modern/array/chunk');
var memoize = require('lodash-node/modern/function/memoize');
angular.module('myModule', [])
.filter('chunk', function() {
return memoize(chunk);
});
और यहाँ इस फिल्टर के साथ एक नमूना है:
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
<div class="column" ng-repeat="item in row">
{{($parent.$index*row.length)+$index+1}}. {{item}}
</div>
</div>
आइटम लंबवत ऑर्डर करें
1 4
2 5
3 6
क्षैतिज (बाएं से दाएं) के बजाय ऊर्ध्वाधर कॉलम (नीचे से ऊपर की ओर सूची) के संबंध में, सटीक कार्यान्वयन वांछित शब्दार्थ पर निर्भर करता है। असमान रूप से विभाजित होने वाली सूचियों को विभिन्न तरीकों से वितरित किया जा सकता है। यहाँ एक तरीका है:
<div ng-repeat="row in columns">
<div class="column" ng-repeat="item in row">
{{item}}
</div>
</div>
var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
function columnize(input, cols) {
var arr = [];
for(i = 0; i < input.length; i++) {
var colIdx = i % cols;
arr[colIdx] = arr[colIdx] || [];
arr[colIdx].push(input[i]);
}
return arr;
}
हालाँकि, स्तंभों को प्राप्त करने का सबसे सीधा और सरल तरीका है सीएसएस कॉलम का उपयोग करना :
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
