web-dev-qa-db-fra.com

imbriqué ng-repeat $ parent. $ index et $ index

J'ai un bug étrange que, malheureusement, je ne peux pas reproduire avec jsfiddle. J'ai commenté tout mon code (sauf les bibliothèques, etc.) à l'exception des extraits suivants. Y a-t-il quelque chose d'évident que je ne comprends pas? Des idées?

Cela fonctionne et imprime: (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>

Cependant, cette partie du code indique: (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>

Mon contrôleur est:

$scope.list  = [1, 2];
$scope.list2 = [1, 2];
angularjsangularjs-ng-repeat
29
Jason

DEMO FIDDLE

En effet, la directive ng-if crée une nouvelle portée pour elle-même. Lorsque vous vous référez à $parent, elle accède à la portée immédiate de $parent, c'est-à-dire à la portée de l'expression de répétition interne.

Donc, si vous voulez réaliser quelque chose que vous vouliez comme auparavant, vous pouvez utiliser ceci:

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

si vous avez plusieurs directives internes, vous pouvez utiliser ng-init pour stocker $index dans une variable pour les références dans les étendues enfants.

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

Je vous suggère fortement de lire cet article sur comprendre les portées en angulaire

65
Raghavendra

Au lieu d'utiliser ng-init, vous pouvez utiliser la syntaxe (key, value)ng-repeat pour obtenir l'index parent.

D&EACUTE;MO

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

découvrez le PLUNK

ng-if crée une nouvelle portée enfant pour laquelle il est nécessaire d'ajouter $ parent . J'ai créé la propriété myname qui indique le nom de la portée, à l'aide de laquelle vous pouvez vérifier ce qui se passe exactement.

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

Le ng-if introduit une autre portée, donc un $parent. ne suffit pas.

Vous pouvez le doubler comme ceci $parent.$parent.$index ou vous souvenir de l'index du ng-repeat extérieur dans une variable différente via ng-init comme ceci:

<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

0
runTarm