嵌套的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];

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>

我强烈建议您阅读本文,了解角度范围

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>