采用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
小提琴:
结论:
我可能会尝试这种使用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屋!