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

Question

我遇到了一个奇怪的错误，不幸的是，我无法在jsfiddle上重现。我已经注释掉了我的整个代码（除了库等），只剩下以下片段。有什么明显的问题我没有理解吗？有什么想法吗？

这段代码可以正常工作并打印出：(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];

- Jason

Answer 1

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

我强烈建议您阅读这篇关于了解Angular中作用域的文章

- Raghavendra

---

你在几秒钟前领先，我差点发送了相同的答案。 :) 绝对正确的解决方案。 - Miraage

Angular团队并不鼓励使用$parent。下面的答案没有使用$parent，更为简洁明了。请大家遵循那份答案。:P - Tim Hong

太棒了@Raghav...这是Angular中许多新手可能不知道的一个非常重要的概念。感谢分享。 - Kings

关于在关闭按钮上拼接列表或列表2的数据，我认为ng-init不会重新初始化。 - Ankit Pandey

Answer 2

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

演示

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

- ryeballar

---

这种方法比使用 ng-init 更为简洁。 - roger

Answer 3

查看PLUNK

由于ng-if会创建一个新的子作用域，所以需要添加$parent。 我已经创建了myname属性来告诉作用域名称，以便您可以检查发生了什么。

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

- harishr

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

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

- runTarm