嵌套的 ng-repeat $parent.$index 和 $index答案

【问题标题】：nested ng-repeat $parent.$index and $index嵌套的 ng-repeat $parent.$index 和 $index
【发布时间】：2014-08-02 10:49:24
【问题描述】：

我有一个奇怪的错误，不幸的是，我无法用 jsfiddle 复制它。除了以下 sn-ps 之外，我已经注释掉了我的整个代码（库等除外）。有什么明显的我不明白吗？有什么想法吗？

这工作并打印： (0,0) (0,1) (1,0) (1,1)

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div>
            ({{$parent.$index}} {{$index}})
        </div>
    </div>
</div>

但是，这段代码打印：(0,0) (1,1) (0,0) (1,1)

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{$parent.$index}} {{$index}})
        </div>
    </div>
</div>

我的控制器是：

$scope.list  = [1, 2];
$scope.list2 = [1, 2];

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

DEMO FIDDLE

这是因为ng-if 指令为自己创建了一个新的作用域，当您引用$parent 时，它会访问直接$parent 的作用域，即内部重复表达式的作用域。

所以如果你想在前者中实现你想要的东西，你可以使用这个：

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{$parent.$parent.$index}} {{$parent.$index}})
        </div>
    </div>
</div>

如果您有多个内部指令，您可以使用ng-init 将$index 存储在一个变量中，以便在子作用域中进行引用。

<div ng-repeat="i in list" ng-init="outerIndex=$index">
    <div ng-repeat="j in list2" ng-init="innerIndex=$index">
        <div ng-if="1">
            ({{outerIndex}} {{innerIndex}})
        </div>
    </div>
</div>

我强烈建议你在understanding scopes in angular阅读这篇文章

【讨论】：

在我几乎发送相同的答案之前，您已经领先了几秒钟。 :) 绝对正确的解决方案。
$parent 不受 Angular 团队的鼓励。下面不使用 $parent 的答案更干净。请跟随那个人。 :P
Amazing @Raghav... 这是 Angular 中的一个非常概念，许多新手可能不知道。感谢分享。
在关闭按钮上拼接来自list或list2的数据我认为ng-init不会被重新初始化

【解决方案2】：

查看PLUNK

ng-if 正在创建一个新的子作用域，因此需要添加 $parent。我创建了myname 属性，它告诉范围名称，使用它您可以检查到底发生了什么..

<div ng-if="1">
    ({{$parent.$parent.$index}} {{$parent.$index}})
</div>

【讨论】：

【解决方案3】：

您可以使用(key, value) ng-repeat 语法来获取父索引，而不是使用ng-init。

DEMO

<div ng-repeat="(iKey, i) in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{iKey}} {{$index}})
        </div>
    </div>
</div>

【讨论】：

这比使用ng-init更干净

【解决方案4】：

ng-if 引入了另一个作用域，所以一个 $parent. 是不够的。

您可以像这样 $parent.$parent.$index 将其翻倍，或者通过 ng-init 在不同的变量中记住外部 ng-repeat 的索引，如下所示：

<div ng-repeat="i in list" ng-init="listIndex = $index">
  <div ng-repeat="j in list2">
    <div ng-if="1">
      ({{listIndex}} {{$index}})
    </div>
  </div>
</div>

示例插件： http://plnkr.co/edit/dtaBAmkU32BCsLASLs0C?p=preview

【讨论】：