AngularJS 在表格的单行上重复多次 ng-repeats

Question

我正在尝试显示一个表格，其中包含来自父对象和子对象列表的项目。是否可以使用 ng-repeat 执行此操作？ for 循环看起来像这样。

foreach(var parent in list)
  foreach (var child in parent)
     print(parent.1)
     print(parent.2)
     print(child.1)
     print(child.2)

下面是每一行的大致思路。

<table>
<tr ng-repeat="parent in list">
   ng-repeat="child in parent"
    <td>parent.item1</td>
    <td>parent.item2</td>
    <td>parent.item3</td>
    <td>child.item1</td>
    <td>child.item2</td>
</tr>
</table>

Answer 1

是的，很有可能。

假设一个名为 parents 的 parent 对象数组，并且 parent.child 本身是一个 child 数组对象，就像在您的示例中一样，您将使用 ngRepeat 的特殊 ng-repeat-start 和 ng-repeat-end 形式执行以下操作。

<table>
<tr ng-repeat="parent in parents">  
    <td>parent.item1</td>
    <td>parent.item2</td>
    <td>parent.item3</td>
    <td ng-repeat-start="child in parent.child">child.item1</td> <!-- start of the inner loop -->
    <td ng-repeat-end>child.item2</td> <!-- end of inner loop -->
</tr>
</table>

更新:

由于 OP 似乎想要按父级分组的单独子行，这可能是寻求的解决方案:

<table>
  <tbody ng-repeat="parent in parents">
  <tr ng-repeat="child in parent.child">
    <td>parent.item1</td>
    <td>parent.item2</td>
    <td>parent.item3</td>
    <td>child.item1</td>
    <td>child.item2</td>
  </tr>
  </tbody>
</table>