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