mindparse mindparse - 4 months ago 19
AngularJS Question

Nested ng-repeat on same element without flattening original data source

I am using ng-repeat to generate table rows for the following object

$scope.things = [{
name: 'Bob',
otherThings: [{
foo: 'hello'
},{
foo: 'bye'
}]
},{
name: 'Sid',
otherThings: [{
foo: 'cake'
},{
foo: 'fish'
}]
}];


The ng-repeat expression I have gone with is:

<tbody ng-repeat="thing in things">
<tr ng-repeat="otherThing in thing.otherThings">
<td>{{thing.name}}</td>
<td>{{otherThing.foo}}</td>
</tr>
</tbody>


This generates multiple tbody elements, one per parent item in my object:

<tbody>
<tr>
<td>Bob</td>
<td>hello</td>
</tr>
<tr>
<td>Bob</td>
<td>bye</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Sid</td>
<td>cake</td>
</tr>
<tr>
<td>Sid</td>
<td>fish</td>
</tr>
</tbody>


I want to avoid multiple tbody elements, but I know in order to access both parent and child items, I will have to nest the ng-repeat's.

I could flatten the original object so that the parent information is duplicated for each child, but I want to avoid this if possible and use the data structure as is.

Are there any special uses of ng-repeat, e.g. multiple expressions that could be used on one ng-repeat to give access to both parent and child items in each iteration?

Thanks

UPDATE

The reason I want to avoid multiple tbody elements is because I have a css selector for alternate row shading:

tbody tr:nth-child(odd){
background-color: $theme-list-alt;
}


If each parent only had one child item they would all get coloured the same, whereas I want alternate row colours across throughout.

SSH SSH
Answer

Try this.

  <tbody>
   <tr ng-repeat="thing in things"> 
     <td>{{thing.name}}</td>
     <td ng-repeat="otherThing in thing.otherThings">{{otherThing.foo}}</td>
   </tr>
 </tbody>