如何將 AngularJS ng-repeat 資料對齊到三個 Bootstrap 欄位？

在三個 Bootstrap 欄位中對齊 AngularJS ng-repeat 資料

AngularJS 提供 ng-repeat 以基於資料數組動態建立元素。當您處理大量元素時，將它們對齊到列中可以增強使用者介面和可讀性。

基於控制器的轉換

首選方法是在控制器使用JavaScript 的chunk 函數，將資料分成均勻大小的群組：

<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 列

建立垂直列的另一個選項是利用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 資料對齊到三個 Bootstrap 欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！