如何将 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中文网其他相关文章！