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

Question

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.

Use ng-repeat on <tr> not on <tbody>

Rakesh Chand
– Rakesh Chand

2016-07-12 10:32:15 +00:00
Commented Jul 12, 2016 at 10:32 — Rakesh Chand
– Rakesh Chand, Commented Jul 12, 2016 at 10:32
I already am in my example

mindparse
– mindparse

2016-07-12 10:33:21 +00:00
Commented Jul 12, 2016 at 10:33 — mindparse
– mindparse, Commented Jul 12, 2016 at 10:33
but one is on tbody I meant that also on tr

Rakesh Chand
– Rakesh Chand

2016-07-12 10:35:43 +00:00
Commented Jul 12, 2016 at 10:35 — Rakesh Chand
– Rakesh Chand, Commented Jul 12, 2016 at 10:35
I want to avoid multiple tbody elements >> why?

Petr Averyanov
– Petr Averyanov

2016-07-12 10:51:11 +00:00
Commented Jul 12, 2016 at 10:51 — Petr Averyanov
– Petr Averyanov, Commented Jul 12, 2016 at 10:51
@mindparse, can you please see my answer?

developer033
– developer033

2016-07-12 18:23:03 +00:00
Commented Jul 12, 2016 at 18:23 — developer033
– developer033, Commented Jul 12, 2016 at 18:23

Hadi · Accepted Answer · 2016-07-12 10:50:00Z

2

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>

edited Jul 12, 2016 at 10:50

answered Jul 12, 2016 at 10:37

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

3 Comments

Ankh Over a year ago

'Try this'... why? what have you done? what was the problem?

mindparse Over a year ago

This does not give the desired output I am looking for. I want one row per child item, but the contents of the row should use both parent and child item properties

mindparse Over a year ago

Sorry, I thought you answer was what I needed but turns out not. I have added a plunkr to my original post which should demonstrate what I'm trying to achieve, see my second update

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related