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

【问题标题】：Nested ng-repeat not working properly嵌套的 ng-repeat 无法正常工作
【发布时间】：2019-01-07 23:03:23
【问题描述】：

我有以下代码

<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 不会向视图呈现任何内容。但是，我更改了代码（下一个 sn-p）以迭代 data.items again，我认为这没有必要，但它确实有效。第一个代码有什么问题？

<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>

【问题讨论】：

第二个 ng-repeat 应该是第一个 ng-repeat 的子级。在第一个示例中，带有 'i' 的 ng-repeat 不是第一个示例的孩子。其中与第二个一样，带有“i”的 ng-repeat 是带有“z”的 ng-repeat 的子代。

标签： html angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

第一个 sn-p 不起作用，因为上面的迭代结束了。

错误

<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>

【讨论】：