Nested ng-repeat-start & ng-repeat-end

AngularJS provides the ng-repeat directive that allows to loop over a collection and add 1 element for each item.

If you need to loop over a collection and want to add more than 1 element (ie generate 2 rows for a single item), you can use ng-repeat-start and ng-repeat-end (see documentation):

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

The struggle comes when the structure of your data is nested:

<tr ng-repeat-start="item in items">...</tr>  
<tr ng-repeat-end ng-repeat-start="d in item.data">...</tr>  
<tr ng-repeat-end>{{d.data}}</tr>  

The code above is valid but the last line will be skipped.

<tr ng-repeat-start="item in items">...</tr>  
<tr ng-repeat-start="d in item.data">...</tr>  
<tr ng-repeat-end ng-repeat-end>{{d.data}}</tr>  

The code above is not valid because it's not allowed to duplicate an attribute.

There is a solution for that problem. It is not ideal but it is handy if you don't want to prepare your data or rely on directives that solve the point.

<tr ng-repeat-start="item in items">...</tr>  
<tr ng-repeat-start="d in item.data">...</tr>  
<tr ng-repeat-end>{{d.data}}</tr>  
<tr ng-repeat-end ng-hide="true"></tr>  

I hope you enjoyed reading this article.