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

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 迭代。

完成后，我们可以再次在四个子 TD 元素中使用 $index。

对于第二个和第三个元素，我们需要将索引分别增加一、二和三，以到达"Team" 数组中的相关位置。但是，如果该数组不能被 4 完全整除，就会出现问题。所以，最后，为了解决这个问题，我们将最后一组 ng-if 属性添加到第二个、第三个和第四个 TD 元素，以确保它们不会被添加如果实际上在数组中的所需位置没有任何对象。

生成以下 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