Nesting ng-repeat-start

If you need to span multiple elements using an ng-repeat, e.g.  you want to generate two rows for a single entry, you can use ng-repeat-start and ng-repeat-end.

 

<tr ng-repeat-start="item in items">
<td>{{item.line1}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item.line2}}</td>
</tr>

This is ideal for working with tables since you can't easiliy wrap <tr>'s in other elements (like you can do with <div>).

But if your structure is nested and you need to nest ng-repeats, especially with table rows, things get complicated because you cannot "terminate" two ng-repeat-start loops in a single <tr>:

<tr ng-repeat-start="item in items">..</tr>
<tr ng-repeat-start="sub in item.subs">..</tr>
<tr ng-repeat-end ng-repeat-end>{{sub.value}}</tr>

isn't valid (obviously, you cannot repeat attributes), neither is

<tr ng-repeat-start="item in items">..</tr>
<tr ng-repeat-end ng-repeat-start="sub in item.subs">..</tr>
<tr ng-repeat-end>{{sub.value}}</tr>

(it will skip the last row).

One solution I've been able to come up with is to add a dummy, hidden <tr> just for terminating the outer loop

<tr ng-repeat-start="item in items">..</tr>
<tr ng-repeat-start="sub in item.subs">..</tr>
<tr ng-repeat-end>{{sub.value}}</tr>
<tr ng-repeat-end ng-hide="true"></tr>

See this plunker for a demonstration. If anyone has a better solution, please comment!

 

 

 

Last updated Sept. 3, 2014, 6:40 p.m. | filed under Software | angularjs ngRepeat ng-repeat ng-repeat-start
comments powered by Disqus