AngularJS 在单行表格上重复多次 ng-repeat [英] AngularJS Multiple ng-repeats on single row of table

问题描述

我正在尝试显示一个表，其中包含来自父对象和子对象列表的项目.是否可以使用 ng-repeat 来做到这一点?for 循环看起来像这样.

I am trying to display a table with items from both a parent and a list of child objects. Is it possible to do this using ng-repeat? A for loop would look something like this.

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

以下是每行的大致外观.

Below is the general idea of what each row would look like.

<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>

推荐答案

是的，很有可能.

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

Assuming an array of parent objects called parents and that parent.child itself is an array of child objects, as it seems to be in your example, you would then do the following using the special ng-repeat-start and ng-repeat-end forms of ngRepeat.

<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 似乎想要按父项分组的单独子行，这可能是寻求的解决方案:

Since the OP seems to want separate child rows grouped by parent, this might be the solution sought:

<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>

这篇关于AngularJS 在单行表格上重复多次 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！