3

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

$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或最佳实践。我知道如何通过向控制器添加分组逻辑来做到这一点，但我认为最好将设计逻辑排除在控制器之外。

4

3 回答 3

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/

于 2013-09-02T03:20:25.890 回答
1

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

于 2016-06-17T03:40:53.067 回答
0

这是我当前的解决方案（它是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）。

于 2013-09-02T03:38:27.660 回答