AngularJS ng-repeat データを 3 つのブートストラップ列に配置する

AngularJS は、データの配列に基づいて要素を動的に作成する ng-repeat を提供します。非常に多くの要素を扱う場合、要素を列に配置すると、ユーザー インターフェイスと読みやすさが向上します。

コントローラベースの変換

推奨されるアプローチは、データを均等なサイズのグループに分割する JavaScript のチャンク関数を使用するコントローラー:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
変換された chunkedData は、次のようにビューにレンダリングできます。

  
{{item}}
ビューでのフィルタリング (注意)
可能ではありますが、ビュー内のデータをチャンク化するためにフィルタを使用することは、データ バインディングの目的では推奨されません。フィルタリングされたビュー内で入力が使用される場合、不一致が発生する可能性があります。
<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>

垂直列

項目を水平ではなく垂直に整列するには、チャンク化メソッドのバリエーションを使用できます。

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;
}

<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

CSS 列

垂直列を作成するもう 1 つのオプションは、CSS 列を利用することです:

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>