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

Answer 1

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>