采用NG-重复迭代数组的大块 [英] iterate over chunks of an array using ng-repeat

问题描述

我的控制器抓住人们从服务器：

My controller grabs people from the server:

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

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

My template needs to display three people per line. For example if it was a table:

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

我不知道如何有条件地适用＆LT; TR＆GT; 在 $索引％3 == 0 或最佳实践是什么。我知道如何通过添加分组逻辑控制器要做到这一点，但我认为这将是最好保持设计逻辑移出控制器。

I wasn't sure how to conditionally apply the <tr> when $index % 3 == 0 or what the best practices are. I know how to do this by adding grouping logic to the controller but I thought it would be best to keep design logic out of the controller.

推荐答案

下面是我目前的解决方案（它的 O（N ^ 2）因此不为大型列表）。

Here is my current solution (It's O(N^2) so doesn't scale for large lists).

模板：

<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可能需要对每个块）。

I'll probably try use CSS for this as @aaronfrost mentions. (However it may not be possible since some wrapping divs may be required for each chunk).

这篇关于采用NG-重复迭代数组的大块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！