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
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside