fnp2oq
Last Updated: December 29, 2016
·
27.22K
· jonotron
591e18d6de648d077d486d607988d9ba

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

Say Thanks
Respond

5 Responses
Add your response

17147
None

What If I require three levels of nesting?

over 1 year ago ·
17941
0 sldsnyiyw3kqjwzt7f7dnpr8wtl5uwztfbjlnprpnk5nkd7 3ijn4y7 bfau4mmyu6ikmul1hpo6

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
0 ofve 1muabvr3jkf ymkj31swxvlxoribycxcqxui drxsv7bygesnpsh5brtvsmuimk9c1vgtekgm5 qy0nvf 9bteagmy7by0wa6fru8gghz51rdwfltdofqt3wmdyo0uqnz9dles

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

10 months 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>

7 months ago ·
Awesome Job

9f636f3e 6e39 11e7 9fd5 de0ca15231c3
Software Engineer
·
St. Thomas, VI, or Landenberg, PA
·
Full Time