ブートストラップを使用して ng-repeat データを 3 つの列に分割するにはどうすればよいですか?

ブートストラップを使用して ng-repeat データを 3 つの列に分割する

AngularJS で ng-repeat を使用する場合、データを複数の列に配置したいと思うのが一般的です。この記事では、ブートストラップを使用して ng-repeat データを 3 つの列に分割するさまざまな方法について説明します。

コントローラーでのデータ変換

最も信頼できるアプローチは、コントローラ。これにより、チャンク化されたデータの新しい配列を作成しながら、元のデータ構造を維持できます。次のような関数を使用できます:

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

ビューで、チャンク化されたデータを反復処理します:

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

ビュー内のフィルター (入力には推奨されません)

フィルターを使用してチャンク化されたデータを表示することは可能ですが、この方法は入力での使用には適していないことに注意することが重要です。代わりに、コントローラーでのデータ変換に依存します。

垂直列

垂直列レイアウトの場合、CSS を変更するか、カスタム関数を使用して要素を配置できます。

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>

カスタム関数

または、不均一なリストを垂直方向に分散することもできますカスタム関数の使用:

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

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