Angular.js: $parent.$index perdu lors de l'utilisation de ng-if

Créé le 10 sept. 2015 · 3Commentaires · Source: angular/angular.js

Mon code HTML

 <div>
 <ul>
 <li ng-repeat='parentItem in arr1'>
 <div ng-repeat='childItem in arr2'>
 {{ $parent.$index }} , {{ $index }}
 </div>
 </li>
 </ul>
 </div>

Code Javascript à l'intérieur du contrôleur

 $portée.arr1 = [1,2];
 $portée.arr2 = [1,2];

Ce code me donne la bonne réponse

 0, 0
 0, 1
 dix,
 1, 1

Mais si j'utilise ng-if="true" dans la boucle enfant, cela me donne une mauvaise réponse

 <div>
 <ul>
 <li ng-repeat='parentItem in arr1'>
 <div ng-repeat='childItem in arr2' ng-if="true">
 {{ $parent.$index }} , {{ $index }}
 </div>
 </li>
 </ul>
 </div>

C'était faux. Il change l'index parent en index enfant

Veuillez résoudre ce problème

Source

kishanmundha

Commentaire le plus utile

Ce n'est pas un problème dans Angular. Cela se produit ( comme documenté ), car ngIf crée une nouvelle portée, donc $parent ne fait pas référence à la portée de la ngRepeat externe.

C'est pourquoi l'utilisation de $parent n'est pas une bonne pratique ici. Vous pouvez/devriez utiliser ngInit pour créer un alias de l'index parent, comme ceci :

<li ng-repeat="parentItem in arr1" ng-init="parentIdx = $index">
  <div ng-repeat="childItem in arr2" ng-if="true">
    {{ parentIdx }} , {{ $index }}
  </div>
</li>

Démo

gkalpak le 10 sept. 2015

👍4

Tous les 3 commentaires

Ce n'est pas un problème dans Angular. Cela se produit ( comme documenté ), car ngIf crée une nouvelle portée, donc $parent ne fait pas référence à la portée de la ngRepeat externe.

C'est pourquoi l'utilisation de $parent n'est pas une bonne pratique ici. Vous pouvez/devriez utiliser ngInit pour créer un alias de l'index parent, comme ceci :

<li ng-repeat="parentItem in arr1" ng-init="parentIdx = $index">
  <div ng-repeat="childItem in arr2" ng-if="true">
    {{ parentIdx }} , {{ $index }}
  </div>
</li>

Démo

gkalpak le 10 sept. 2015

👍4

BTW, il s'agit d'une question d'assistance générale. De telles questions devraient mieux être adressées aux canaux appropriés .
Les problèmes GitHub sont réservés aux rapports de bogues et aux demandes de fonctionnalités.

gkalpak le 10 sept. 2015

Merci,

Je peux l'utiliser par ng-init

kishanmundha le 10 sept. 2015

Cette page vous a été utile?

0 / 5 - 0 notes