如何使用 Bootstrap 將 ng-repeat 資料拆分為三列？

使用 Bootstrap 將 ng-repeat 資料拆分為三列

在 AngularJS 中使用 ng-repeat 時，通常希望將資料排列為多列。本文探討了使用 Bootstrap 將 ng-repeat 資料拆分為三列的不同方法。

控制器中的資料轉換

最可靠的方法是在控制器中轉換資料控制器。這允許您在建立新的分塊資料數組時維護原始資料結構。您可以使用以下函數：

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

以上是如何使用 Bootstrap 將 ng-repeat 資料拆分為三列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！