我有一个表格行,我想重复,每行只有4 td
<table>
<tr>
<td ng-repeat="team in Teams">{{team}}</td>
</tr>
</table>
我如何重复Td,但每4 td创建另一个tr并关闭前一个
答案 0 :(得分:4)
这可以通过使用$index
特殊属性来实现。
如果我们将ng-repeat
移动到TR
元素,则每次都会产生TR
。
然后,我们可以通过添加ng-if
属性来对抗此行为,该属性将当前$index
与模数4进行比较,这意味着TR
只会在ng-repeat
的每四次迭代中添加。
完成此操作后,我们可以再次在四个子$index
元素中使用TD
。
对于第二个和第三个元素,我们需要分别将索引增加一,二和三,以到达"Team"
数组内的相关位置。
但是,如果该阵列不能完全被4整除,则会产生问题。
最后,为了解决这个问题,我们在第二个第三和第四个ng-if
元素中添加了一组最终的TD
属性,以确保在没有这些元素的情况下不会添加它们。 t表示阵列中所需位置的任何对象。
导致以下HTML:
<table>
<tr ng-repeat="team in Teams" ng-if="$index % 4 == 0">
<td>{{Teams[$index]}}</td>
<td ng-if="$index+1 < Teams.length">{{Teams[$index + 1]}}</td>
<td ng-if="$index+2 < Teams.length">{{Teams[$index + 2]}}</td>
<td ng-if="$index+3 < Teams.length">{{Teams[$index + 3]}}</td>
</tr>
</table>
您可以在此处找到有关ng-repeat特殊属性的更多信息:文档:https://docs.angularjs.org/api/ng/directive/ngRepeat
答案 1 :(得分:1)
https://docs.angularjs.org/api/ng/directive/ngRepeat
您可以从$ index获取值,并在$ index%4上设置一个条件
</tr><tr>
<!/ P>
大概就是这样:
repeat with team in Teams
IF $index%4 == 0
</tr><tr>
{{team}}
end-repeat
不完全熟悉Angular使用的语法,但我想你会明白:)
答案 2 :(得分:1)
虽然这是一个已回答的问题,但这是另一个使用filters
只需在您的应用中添加新过滤器,例如
app.filter('GroupBy', function(){
return function(data,array, step) {
var result = [];
for(var i = 0; i<array.length;i+=step){
var _step = i+step;
result.push(array.slice(i,_step));
}
return result;
};
});
在您的模板中,使用
<tr ng-repeat="team in Teams | GroupBy:Teams :4">
<td ng-repeat="t in team">{{t}}</td>
</tr>