嵌套ng-repeat美元的父母。指数和美元指数

I have a strange bug that, unfortunately, I cannot replicate with jsfiddle. I've commented out my entire code (Except libraries,etc) except for the following snippets. Is there something obvious that I don't understand? Any ideas?

我有一个奇怪的错误，不幸的是，我不能用jsfiddle复制。除了下面的代码片段，我已经注释掉了整个代码(除了库等)。有什么明显的东西我不明白吗?什么好主意吗?

This works and prints: (0,0) (0,1) (1,0) (1,1)

可以打印:(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>

However, this piece of code prints: (0,0) (1,1) (0,0) (1,1)

然而，这段代码输出:(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>

My controller is:

我的控制器:

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

4 个解决方案

#1

DEMO FIDDLE

演示小提琴

That's because the directive ng-if creates a new scope for itself, when you refer to $parent, it access the immediate $parent's scope, i.e., the inner repeat expression's scope.

这是因为指令ng——如果为它自己创建一个新的范围，当您引用$parent时，它将访问当前$parent的范围，即。，内重复表达式的范围。

So if you want to achieve something you wanted like in the former, you may use this:

因此，如果你想实现你之前想要的东西，你可以这样做:

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

if you have more than one inner directives, you can use ng-init for storing $index in a variable for references in child scopes.

如果有多个内部指令，可以使用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>

I strongly suggest you to go through this article on understanding scopes in angular

我强烈建议你阅读这篇关于理解角度的文章

#2

Instead of using ng-init you can use the (key, value) ng-repeat syntax to get the parent index.

不要使用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>

#3

check out the PLUNK

查看砰砰作响

ng-if is creating a new child scope because of which there is a need to add $parent. i have created myname property which tells the scope name, using which you can check whats exactly happening..

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

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

#4

The ng-if introduce an another scope, so one $parent. isn't enough.

ng-if引入了另一个范围，即一个$parent。是不够的。

You could double it like this $parent.$parent.$index, or remember the index of the outer ng-repeat in a different variable via ng-init like this:

你可以像$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>

Example plunker: http://plnkr.co/edit/dtaBAmkU32BCsLASLs0C?p=preview

例子恰好:http://plnkr.co/edit/dtaBAmkU32BCsLASLs0C?p=preview

#1