angularjs – 嵌套ng-repeat $parent.$index和$index

前端之家收集整理的这篇文章主要介绍了angularjs – 嵌套ng-repeat $parent.$index和$index前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个奇怪的错误,不幸的是,我不能用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,1)(0,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];
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通过这篇文章

原文链接:https://www.f2er.com/angularjs/142834.html

猜你在找的Angularjs相关文章