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

ブートストラップを使用して ng-Repeat データを列に分散する

AngularJS では、反復データを扱うときに ng-repeat を活用することが基本です。ただし、これらの要素を 3 つの異なる列など、視覚的に魅力的なレイアウトに編成する必要が生じることがよくあります。これを達成するために、コントローラー レベルとビュー レベルの両方のソリューションを含むさまざまなアプローチを掘り下げます。

コントローラー レベルの変換

堅牢なアプローチは、コントローラー内のデータ。提供されたチャンク関数を活用することで、データを等しいサブ配列に分割し、それぞれが 1 つの列を表すことができます:

<code class="javascript">function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i&lt;arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);

このデータは、次のようにネストされた ng-repeat を使用してレンダリングできます:

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

ビューレベルのフィルタリング

または、フィルタを使用して、ビュー内で目的のレイアウトを実現することもできます。ただし、このアプローチは主に表示目的を目的としており、入力要素を組み込むときに問題が発生する可能性があります。

<code class="html">&lt;pre&gt;&lt;div ng-repeat=&quot;row in ['a','b','c','d','e','f'] | chunk:3&quot;&gt;
  &lt;div class=&quot;column&quot; ng-repeat=&quot;item in row&quot;&gt;
    {{($parent.$index*row.length)+$index+1}}. {{item}}
  &lt;/div&gt;
&lt;/div&gt;
&lt;/pre&gt;</code>

垂直列化

項目を水平ではなく垂直に分散するには、前述のアプローチにわずかな変更を加えることができます:

<code class="html">&lt;div ng-repeat=&quot;row in columns&quot;&gt;
  &lt;div class=&quot;column&quot; ng-repeat=&quot;item in row&quot;&gt;
    {{item}}
  &lt;/div&gt;
&lt;/div&gt;</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 &lt; input.length; i++) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

CSS 列

もう 1 つの洗練されたソリューションには、CSS 列の活用が含まれます:

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

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

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