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
Written by Jonathan Bowers
Related protips
6 Responses
What If I require three levels of nesting?
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?
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/
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
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>{{ memberchild.name }}</td>
<td>{{ member_child.gender }}</td>
</tr>
</tbody>
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
