使用 ng-repeat 遍历数组的块答案

【问题标题】：iterate over chunks of an array using ng-repeat使用 ng-repeat 遍历数组的块
【发布时间】：2013-09-05 01:42:17
【问题描述】：

我的控制器从服务器抓取人员：

$scope.people = [person1, person2, person3, person4, person5,...]

我的模板需要每行显示三个人。例如，如果它是一张桌子：

<table>
    <tr>
        <td>person1</td><td>person2</td><td>person3</td>
    </tr>
    <tr>
        <td>person4</td><td>person5</td><td>person6</td>
    </tr>
</table>

我不确定当$index % 3 == 0 时如何有条件地应用<tr> 或最佳实践是什么。我知道如何通过向控制器添加分组逻辑来做到这一点，但我认为最好将设计逻辑排除在控制器之外。

【问题讨论】：

这是一个很棒的解决方案stackoverflow.com/a/11058532/304319
@sza 感谢我现在正在查看的链接。我应该提到我可能也需要过滤器才能工作。

标签： css angularjs grouping templating

【解决方案1】：

目前还没有一种方法可以用表格完成您所说的操作。做你想做的最简单的方法是使用具有固定宽度的 div，以便它们在三个之后自动换行。

这是一个例子：

HTML

<div ng-app="app">
    <div ng-controller="TableCtrl" class="my-table">
        <span ng-repeat="person in people" class="person">{{person}}</span>
    </div>
</div>

CSS

.my-table{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

.person{
    width: 100px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid black;
}

JavaScript

var app = angular.module('app',[]);
app.controller('TableCtrl', function($scope){

    $scope.people = ['Aaron', 'Abraham', 'Adam', 'Aristotel', 'Aziel', 'Azod', 'Azood'];

});

工作副本：http://jsfiddle.net/ZX43D/

【讨论】：

谢谢 - 唉，我希望 angularjs 有一个简单的方法。我会按照你的建议尝试使用 CSS - 实际上我有一个特殊的 DOM 元素（不是），所以使用直接 CSS 会很棘手。谢谢

【解决方案2】：

经过多年的角度经验，显然最好的方法是在控制器中将数组拆分为块。每次修改原始数组时，更新分块数组。

【讨论】：

【解决方案3】：

这是我目前的解决方案（它是 O(N^2)，因此不适用于大型列表）。

模板：

<div ng-app="myapp">
    <div ng-controller="testing">
        <div ng-repeat="_ in items">
            <span ng-show="($parent.$index % 3 == 0) && ($parent.$index + 3 > $index) && ($parent.$index <= $index)" ng-repeat="item in items">
                <span ng-show="1">
                    {{item}}
                </span>
            </span>
        </div>
    </div>
</div>

控制器：

angular.module('myapp', []);

function testing($scope){
    $scope.items = ['a', 'b', 'c', 'd','e','f','g'];
}

结果：

a b c
d e f
g

小提琴：

http://jsfiddle.net/LjX3m/

结论：

@aaronfrost 提到，我可能会尝试为此使用 CSS。（但是这可能是不可能的，因为每个块可能需要一些包装 div）。

【讨论】：