Question

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

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

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

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

Answer 2

经过多年的角度体验，很明显，最好的方法是将阵列分成控制器中的块。每次修改原始数组时，都要更新分块数组。

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

<强>结论：

我可能会尝试使用CSS作为@aaronfrost提及。（但是，由于每个块可能需要一些包装div，因此可能无法实现。）

使用ng-repeat迭代数组的块

3 个答案: