AngularJS ng-repeat データを 3 つのブートストラップ列に配置するにはどうすればよいですか?

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

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

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

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

<code class="js">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);

変換された chunkedData は、次のようにビューにレンダリングできます。

<code class="html"><div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div></code>

ビューでのフィルター処理(注意)

可能ではありますが、データ バインディングの目的でフィルターを使用してビュー内のデータをチャンク化することはお勧めできません。フィルタリングされたビュー内で入力が使用されると、不整合が生じる可能性があります。

<code class="html"><pre class="brush:php;toolbar:false">
<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>

垂直列

項目を水平ではなく垂直に整列させるには、チャンキング方法のバリエーションを使用できます。

<code class="js">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;
}

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

CSS 列

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

<code class="css">.columns {
  columns: 3;
}</code>

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

以上がAngularJS ng-repeat データを 3 つのブートストラップ列に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。