fnp2oq
Last Updated: August 21, 2017
·
41.4K
· jonotron

use ng-repeat on tbody to create summary rows for nested data

Did you know you can have multiple tbody tags in a table? Ya, me either!

Turns out this is super handy with angular's ng-repeat allowing you to create summary rows for your nested data structures. E.g.

<tbody ng-repeat="group in groups">
  <tr>
    <td colspan="2">{{group.name}}</td>
  </tr>
  <tr ng-repeat="member in group.members">
    <td>{{ member.name }}</td>
    <td>{{ member.gender }}</td>
  </tr>
</tbody>

Full simple example here: http://jsbin.com/hefadifu/1/edit?html,js,output

6 Responses
Add your response

17147

What If I require three levels of nesting?

over 1 year ago ·
17941

I have a similar question. What if you have unlimited levels of nesting an you only want to use one template for the ng-repeat? How can you make your ng-repeat more generic?

over 1 year ago ·
23215

I think we three levels you have to use a different paradigm, the ng-repeat-start and ng-repeat-end directives which allow you to repeat a block of HTML that is not all contained in one single container tag.

Here is a good description: http://vanderwijk.info/blog/nesting-ng-repeat-start/

over 1 year ago ·
28167

can any one help on 3 table
https://plnkr.co/edit/NEpmNa6QjetrnXzdJPv7?p=preview

i required row1
row1
row 1.1
row 1.2
row 2
row 2
row 2.1
row 2.2

over 1 year ago ·
28422

Thanks for sharing this approach.

In order to implement the three levels, you can combine it with ng-repeat-start and ng-repeat-end as:

<tbody ng-repeat="group in groups">
<tr>
<td colspan="2">{{group.name}}</td>
</tr>
<tr ng-repeat-start="member in group.members">
<td>{{ member.name }}</td>
<td>{{ member.gender }}</td>
</tr>
<tr ng-repeat-end ng-repeat="memberchild in member.child">
<td>{{ member
child.name }}</td>
<td>{{ member_child.gender }}</td>
</tr>
</tbody>

over 1 year ago ·
29235

I have written a similar article in depth, i.e., using nested ng-repeat in angularjs refer https://codepedia.info/angularjs-nested-json-nested-ng-repeat/
Hope future reader enjoy reading it

over 1 year ago ·