AngularJS在单行表上多次重复

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 对象数组，就像在您的示例中那样，您将使用特殊的 ng- 执行以下操作ngRepeat 的 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>