如何在 AngularJS 中使用 Bootstrap 將 ng-repeat 資料分配到列中？

使用 Bootstrap 將 ng-Repeat 資料分佈到列中

在 AngularJS 中，利用 ng-repeat 是處理重複資料的基礎。然而，經常需要將這些元素組織成具有視覺吸引力的佈局，例如三個不同的列。為了實現這一目標，我們深入研究了各種方法，包括控制器級和視圖級解決方案。

控制器級轉換

穩健的方法在於將控制器內的資料。透過利用提供的chunk 函數，我們可以將數據劃分為相等的子數組，每個子數組代表一列：

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

然後可以使用嵌套的ng-repeat 渲染該數據，如下所示：

<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="html"><div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{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;
}

CSS 欄位

另一個優雅的解決方案涉及利用CSS 欄位：

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

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

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