Nested ng-repeat-start / ng-repeat-end

Question

ng-repeat-start / ng-repeat-end are used for looping through data without rendering parent element [Portal to Docs] . In my case, I want to display data in nested ng-repeat-start / ng-repeat-end blocks without extra elements.

I've tried to put two ng-repeat-start directives into the same element but it fails to display correctly. I somehow figured out a workaround as displayed below [Portal to Demo] . Any better solution for case like this?

data

[{
    name: 'Chapter 1',
    sections: [{
        name: '1-1',
        words: 1024
    }, {
        name: '1-2',
        words: 512
    }]
}, {
    name: 'Chapter 2',
    sections: [{
        name: '2-1',
        words: 2048
    }, {
        name: '2-2',
        words: 256
    }]
}]

html

<tr class="tr-for" ng-repeat-start="chapter in main.book"></tr>
  <tr ng-repeat-start="section in chapter.sections" ng-repeat-end>
    <td>{{chapter.name}}</td>
    <td>{{section.name}}</td>
    <td>{{section.words}}</td>
  </tr>
<tr class="tr-end" ng-repeat-end></tr>

css

tr.tr-for,
tr.tr-end {
  display: none;
}

Answer 1

Your internal ng-repeat should be the regular ngRepeat:

<tr class="tr-for" ng-repeat-start="chapter in main.book"></tr>
    <tr ng-repeat="section in chapter.sections">
        <td>{{chapter.name}}</td>
        <td>{{section.name}}</td>
        <td>{{section.words}}</td>
    </tr>
<tr class="tr-end" ng-repeat-end></tr>

Update

Try use the first ngRepeat inside of tbody tag:

<tbody ng-repeat="chapter in main.book">
  <tr ng-repeat-start="section in chapter.sections" ng-repeat-end>
    <td>{{chapter.name}}</td>
    <td>{{section.name}}</td>
    <td>{{section.words}}</td>
  </tr>
</tbody>