সবচেয়ে নির্ভরযোগ্য এবং প্রযুক্তিগতভাবে সঠিক দৃষ্টিভঙ্গি হ'ল নিয়ামকের মধ্যে ডেটা পরিবর্তন করা। এখানে একটি সরল অংশ এবং ব্যবহার রয়েছে।
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ফাংশন অন্তর্ভুক্ত রয়েছে , তাই আমরা খুব সহজেই ব্যবহার করে এই ফিল্টারটি তৈরি করতে পারিnpmমডিউল এবং সঙ্গে স্ক্রিপ্ট সংকলন browserifyবা webpack।
মনে রাখবেন: কেবল প্রদর্শন! আপনি যদি ইনপুট ব্যবহার করেন তবে কন্ট্রোলারে ফিল্টার করুন!
লড্যাশ ইনস্টল করুন:
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;
}
যাইহোক, কলামগুলি পাওয়ার সর্বাধিক প্রত্যক্ষ এবং সহজভাবে সহজ উপায় হ'ল CSS কলামগুলি ব্যবহার করা :
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
