代码之家 › 专栏 › 技术社区 › chris

嵌套的ng repeat不能正常工作

angularjs-ng-repeat angularjs-directive angularjs html

chris · 技术社区 · 7 年前

我有以下代码

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

1 回复 | 直到 7 年前

georgeawg 7 年前

第一个片段不起作用,因为上面的迭代已经结束。

错误的

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

推荐文章