我有以下代码
<div class="list-group">
<a class="list-group-item" href="" ng-repeat="q in data.items">
<i ng-if="q.glyph" class="fa fa-{{::q.glyph}} m-r-sm"></i>
<i ng-if="!q.glyph" class="fa fa-chevron-right m-r-sm"></i> {{::q.label}}</a>
<div>
<a href="" class="list-group-item" ng-repeat="i in q.items | orderBy:'label'">
<i class="fa fa-{{::i.glyph}} m-r-sm"></i>
<i ng-if="::!i.glyph" class=""></i> {{::i.label}}
</a>
</div>
出于某种原因,第二个 ng-repeat
i in q.items
不会向 View 渲染任何内容。但是,我更改了代码(下一个片段)以迭代 data.items
再次,我认为没有必要,但它有效。第一个代码有什么问题?
<div class="list-group">
<a class="list-group-item" href="" ng-repeat="q in data.items">
<i ng-if="q.glyph" class="fa fa-{{::q.glyph}} m-r-sm"></i>
<i ng-if="!q.glyph" class="fa fa-chevron-right m-r-sm"></i> {{::q.label}}</a>
<div>
<div ng-repeat="z in data.items">
<a href="" class="list-group-item" ng-repeat="i in z.items | orderBy:'label'">
<i class="fa fa-{{::i.glyph}} m-r-sm"></i>
<i ng-if="::!i.glyph" class=""></i> {{::i.label}}
</a>
</div>
</div>
最佳答案
第一个代码片段不起作用,因为上面的迭代已经结束。
ERRONEOUS
<a ng-repeat="q in data.items"> {{q.data}} </a> <!-- end of iteration --> <a ng-repeat="i in q.items"> <!-- You try to iterate an undefined array --> {{i.data}} </a>
解决方案可能是:
<div class="list-group">
<div ng-repeat="q in data.items">
<a class="list-group-item" href="">
<i ng-if="q.glyph" class="fa fa-{{::q.glyph}} m-r-sm"></i>
<i ng-if="!q.glyph" class="fa fa-chevron-right m-r-sm"></i> {{::q.label}}
</a>
<div>
<a href="" class="list-group-item" ng-repeat="i in q.items | orderBy:'label'">
<i class="fa fa-{{::i.glyph}} m-r-sm"></i>
<i ng-if="::!i.glyph" class=""></i> {{::i.label}}
</a>
</div>
</div>
</div>
关于html - 嵌套 ng-repeat 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51615254/