最も信頼性が高く、技術的に正しいアプローチは、コントローラーでデータを変換することです。簡単なチャンク関数と使用法を次に示します。
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
多くの人は、フィルターを使用してビューでこれを実現することを好みます。これは可能ですが、表示目的でのみ使用してください。このフィルターされたビュー内に入力を追加すると、解決できる問題が発生しますが、見栄えも信頼性も高くありません。
このフィルターの問題は、毎回新しいネストされた配列を返すことです。Angularはフィルターからの戻り値を監視しています。フィルターが初めて実行されるとき、Angularは値を認識しており、それを再度実行して、変更が完了したことを確認します。両方の値が同じ場合、サイクルは終了します。そうでない場合、フィルターは同じになるまで何度も起動します。そうしないと、Angularは無限のダイジェストループが発生していることを認識してシャットダウンします。新しいネストされた配列/オブジェクトは以前Angularによって追跡されていなかったため、戻り値は常に以前とは異なるものとして認識されます。これらの「不安定な」フィルターを修正するには、フィルターをmemoize関数でラップする必要があります。lodash持っているmemoize機能とlodashも含まれる最新バージョンのchunk機能を、私たちは非常に簡単に使用してこのフィルタを作成することができますnpmモジュールおよびbrowserifyまたはでスクリプトをコンパイルしますwebpack。
覚えておいてください：表示のみ！入力を使用している場合は、コントローラーでフィルター処理してください。
lodashをインストールします。
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
水平（左から右）ではなく垂直列（上から下にリスト）に関しては、正確な実装は目的のセマンティクスによって異なります。不均等に分割されるリストは、さまざまな方法で配布できます。これが1つの方法です。
<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>
