Angularjs-如何在ng-repeat中重复tr

时间:2015-10-09 10:23:19

标签: javascript angularjs

我有一个表格行,我想重复,每行只有4 td

<table>
 <tr>
 <td ng-repeat="team in Teams">{{team}}</td>
 </tr>
</table>

我如何重复Td,但每4 td创建另一个tr并关闭前一个

3 个答案:

答案 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>