AngularJS表上单列多NG-重复

问题描述

我想从两个父和子对象的列表项显示一个表格。是否有可能做到这一点使用NG-重复？一个for循环会是这个样子。

 的foreach（在列表VAR父）
  的foreach（VAR孩子父母）
     打印（parent.1）
     打印（parent.2）
     打印（child.1）
     打印（child.2）
 

下面是什么每一行会是什么样子的总体思路。

 ＆LT;表＆gt;
＆LT; TR NG重复=父列表中的＆GT;
   NG-重复=孩子家长
    ＆LT; TD＆GT; parent.item1＆LT; / TD＆GT;
    ＆LT; TD＆GT; parent.item2＆LT; / TD＆GT;
    ＆LT; TD＆GT; parent.item3＆LT; / TD＆GT;
    ＆LT; TD＆GT; child.item1＆LT; / TD＆GT;
    ＆LT; TD＆GT; child.item2＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

是的，很有可能。

假设父对象称为数组家长和 parent.child 本身就是子阵列的对象，因为它似乎是在你的榜样，你会那么做的用特殊的NG-重复启动以下和NG-重复端形式ngRepeat的。

 ＆LT;表＆gt;
＆LT; TR NG重复=父母双亲＆GT;
    ＆LT; TD＆GT; parent.item1＆LT; / TD＆GT;
    ＆LT; TD＆GT; parent.item2＆LT; / TD＆GT;
    ＆LT; TD＆GT; parent.item3＆LT; / TD＆GT;
    ＆LT; TD NG-重复启动=，在parent.child子＆GT; child.item1＆LT; / TD＆GT; ＆所述;！ - 内环的开始 - ＆GT;
    ＆LT; TD NG重复端＆GT; child.item2＆LT; / TD＆GT; ＆LT;！ - 内环的结束 - ＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
 

更新：

由于OP似乎想通过父母单独分组子行，这可能是解决方案寻求：

 ＆LT;表＆gt;
  ＆LT; TBODY NG重复=父母双亲＆GT;
  ＆LT; TR NG重复=孩子parent.child＆GT;
    ＆LT; TD＆GT; parent.item1＆LT; / TD＆GT;
    ＆LT; TD＆GT; parent.item2＆LT; / TD＆GT;
    ＆LT; TD＆GT; parent.item3＆LT; / TD＆GT;
    ＆LT; TD＆GT; child.item1＆LT; / TD＆GT;
    ＆LT; TD＆GT; child.item2＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

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>

解决方案

Yes, quite possible.

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>

Update:

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-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！