AngularJS 在表中使用 ng-repeat 两次答案

【问题标题】：AngularJS using ng-repeat twice in a tableAngularJS 在表中使用 ng-repeat 两次
【发布时间】：2016-02-16 04:09:26
【问题描述】：

这个问题来自 AngularJS.org 教程我们使用以下代码创建了一个表：

<table>
  <tr><th>row number</th></tr>
  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
</table>

这给了我们一个 1 行表。额外的挑战是使用额外的 ng-repeat 制作一个 8x8 表。我已经尝试过多次以不同的方式通过添加 ng-repeat 来创建 7 个额外的列，但我几乎总是以第 9 行代码而不是数据结束。

顺便说一句，实际上没有积分；我只是想要知识。

【问题讨论】：

你得到一个有一个的行。你得到一个带有的列。所以你需要在你的情况下循环 8 个 tr's 和 8 个 td's
我明白但是怎么做？我没有正确维护行号的正确语法。
你看到你的代码现在产生了 8 个，每个只包含一个。您希望它具有 8x8 只需使用 2 ng-repeat——一个在 tr 上，另一个在 td 上。 @Chrillewoodz 的解决方案应该可以。

【解决方案1】：

这将使用嵌套的ng-repeat 创建一个 8x8 表：

<table>
  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
    <td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">{{j}}</td>
  </tr>
</table>

【讨论】：

新输出：从中没有正确编号行。所有行号现在都是“0”，它们以前是 1 到 8。

【解决方案2】：

如果这个问题仍然存在 - 这里有两种填充表格的变体 - 逐行和逐列（从 1 到 8）。在<tr> 和<td> 中使用嵌套指令ng-repeat

逐行：

<table>
    <tr><th colspan="8">Row number</th></tr>
    <tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]">
        <td ng-repeat = "j in [0, 1, 2, 3, 4, 5, 6, 7]">{{j+1}}</td>
    </tr>
</table>

逐列：

<table>
  <tr><th colspan="8">Row number</th></tr>
    <tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]">
        <td ng-repeat = "j in [0, 1, 2, 3, 4, 5, 6, 7]">{{i+1}}</td>
    </tr>   
</table>

【讨论】：