AngularJS Multiple ng-repeats on single row of table

Question

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>

that's still not really clear; the inner `ng-repeat` needs an element... are you intending to nest the child `` inside the parent ``? — Claies, Sep 14 '15 at 17:46

Michael Oryl · Accepted Answer · 2015-09-14T17:58:08.367

9

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>

edited Sep 14 '15 at 17:58

answered Sep 14 '15 at 17:47

Michael Oryl

20,856
14
77
117

that will only make one row for each parent, with multiples of the child ``, yes? so if a parent has 5 children, there will be 10 `` in that row? – Claies Sep 14 '15 at 17:50
Ah, I see what you are looking for. Let me change the code a bit. – Michael Oryl Sep 14 '15 at 17:52
@james Try this update. Do either of these get you what you want? – Michael Oryl Sep 14 '15 at 17:59
I got the first example to work but as @Claies stated it only dones one row per parent and I need a row per child. – James Sep 14 '15 at 18:41
@MichaelOryl The second example seems to do what I want but I am currently getting another error. – James Sep 14 '15 at 18:47
The issue seems to be that Angular DataTables do not support multiple tags. – James Sep 14 '15 at 19:09
@James That's a shame. It's perfectly legal for a table to have multiple tbody tags. Your issue is that you need nested tags to get the nested ng-repeats that you require. – Michael Oryl Sep 15 '15 at 10:34
@MichaelOryl It is a shame but I am able to just switch to regular datatables and make it work. – James Sep 15 '15 at 14:20

AngularJS Multiple ng-repeats on single row of table

1 Answers1

Linked