CODEWITHSUNDEEP
angularjs
mindparse
mindparse

Reputation: 7225

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.

Update 2

I wondered whether using ng-repeat-start and ng-repeat-end could help me here, so I tried with the following Plunkr

This doesnt give me a row per child, e.g:

Bob hello
Bob bye
Sid cake
Sid fish

I can see why, just not sure how I can achieve this.

Upvotes: 2

Views: 214

Answers (1)

Hadi
Hadi

Reputation: 17289

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>

Upvotes: 2

Related Questions