En güvenilir ve teknik olarak doğru yaklaşım, kontrolördeki verileri dönüştürmektir. İşte basit bir yığın işlevi ve kullanımı.
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);
O zaman görüşünüz şöyle görünecektir:
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
ng-repeatİçinde herhangi bir girişiniz varsa , veriler değiştirilirken veya gönderilirken dizileri büyük olasılıkla ayrıştırmak / yeniden birleştirmek isteyeceksiniz. $watchVerilerin her zaman orijinal, birleştirilmiş biçimde mevcut olması için bunun a biçiminde nasıl görüneceği aşağıda açıklanmıştır :
$scope.$watch('chunkedData', function(val) {
$scope.data = [].concat.apply([], val);
}, true); // deep watch
Birçok kişi bunu görünümde bir filtreyle gerçekleştirmeyi tercih eder. Bu mümkündür, ancak yalnızca görüntüleme amacıyla kullanılmalıdır! Bu filtrelenmiş görünümü içinde girdileri eklerseniz, sorunlara neden olur olabilir çözülecek ama olan tatlı veya güvenilir değildir .
Bu filtrenin sorunu, her seferinde yeni iç içe diziler döndürmesidir. Açısal, filtreden dönüş değerini izliyor. Filtre ilk kez çalıştığında, Angular değeri bilir ve ardından değiştirmenin tamamlandığından emin olmak için tekrar çalıştırır. Her iki değer de aynıysa döngü sonlandırılır. Değilse, filtre aynı oluncaya kadar tekrar tekrar patlar veya Angular sonsuz bir özet döngüsünün oluştuğunu fark eder ve kapanır. Yeni iç içe diziler / nesneler daha önce Angular tarafından izlenmediğinden, dönüş değerini her zaman öncekinden farklı olarak görür. Bu "kararsız" filtreleri düzeltmek için filtreyi bir memoizeişlevin içine sarmalısınız. lodashbir memoizeişleve sahiptir ve lodash'ın en son sürümü ayrıca bir içerir derlerchunk işlev , bu yüzden bu filtreyi çok basit bir şekilde oluşturabiliriznpmmodülleri ve betiği browserifyveya ile derlemek webpack.
Unutmayın: yalnızca görüntüleme! Girişleri kullanıyorsanız denetleyicide filtreleyin!
Lodash'ı yükleyin:
npm install lodash-node
Filtreyi oluşturun:
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);
});
Ve işte bu filtre ile bir örnek:
<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>
Ürünleri dikey olarak sıralayın
1 4
2 5
3 6
Yatay (soldan sağa) yerine dikey sütunlar (yukarıdan aşağıya liste) ile ilgili olarak, tam uygulama istenen anlam bilgisine bağlıdır. Eşit olmayan şekilde bölünen listeler farklı şekillerde dağıtılabilir. İşte bir yol:
<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;
}
Bununla birlikte, sütun almanın en doğrudan ve açıkça basit yolu CSS sütunlarını kullanmaktır :
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
