Question

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

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

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

Answer 1

这可以通过使用$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

Answer 2

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使用的语法，但我想你会明白：）

Answer 3

虽然这是一个已回答的问题，但这是另一个使用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>

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

3 个答案: