嵌套的 ng-repeat 无法正常工作

Question

我有以下代码

<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 没有向视图呈现任何内容。但是，我更改了代码（下一个片段）以再次遍历 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>

Answer 1

第一个代码段无效，因为上面的迭代已经结束。

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>

嵌套的 ng-repeat 无法正常工作

Nested ng-repeat not working properly

html

angularjs

angularjs-directive

angularjs-ng-repeat