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

Answer 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

上阅读这篇文章

Answer 2

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

<强> DEMO

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

Answer 3

查看PLUNK

ng-if正在创建一个新的子范围，因此需要添加$ parent。我创建了myname属性，告诉范围名称，您可以使用它来查看确切发生的事情。

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

Answer 4

ng-if引入了另一个范围，因此一个$parent.还不够。

你可以像$parent.$parent.$index一样加倍，或者通过ng-repeat记住另一个变量中的外ng-init的索引，如下所示：

<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

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

4 个答案: