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 <tr> inside the parent <tr>? — Claies
– Claies, Commented Sep 14, 2015 at 17:46

Michael Oryl · Accepted Answer · 2015-09-14 17:58:08Z

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, 2015 at 17:58

answered Sep 14, 2015 at 17:47

Michael Oryl

21.8k15 gold badges82 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Claies Over a year ago

that will only make one row for each parent, with multiples of the child <td>, yes? so if a parent has 5 children, there will be 10 <td> in that row?

Michael Oryl Over a year ago

Ah, I see what you are looking for. Let me change the code a bit.

Michael Oryl Over a year ago

@james Try this update. Do either of these get you what you want?

James Over a year ago

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 Over a year ago

@MichaelOryl The second example seems to do what I want but I am currently getting another error.

|

Collectives™ on Stack Overflow

AngularJS Multiple ng-repeats on single row of table

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related