ng-repeat-start
/ng-repeat-end
用于在不渲染父元素的情况下循环数据 [Portal to Docs] .就我而言,我想在没有额外元素的情况下在嵌套的 ng-repeat-start
/ng-repeat-end
block 中显示数据。
我尝试将两个 ng-repeat-start
指令放入同一个元素中,但无法正确显示。我以某种方式想出了一个解决方法,如下所示 [Portal to Demo] .对于这种情况有更好的解决方案吗?
数据
[{
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;
}
最佳答案
您的内部 ng-repeat 应该是常规的 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>
更新
尝试在 tbody 标签内使用第一个 ngRepeat:
<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>
关于javascript - 嵌套的 ng-repeat-start/ng-repeat-end,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25288648/