Angular.js: $ parent. $ index perdido ao usar ng-if

Criado em 10 set. 2015 · 3Comentários · Fonte: angular/angular.js

Meu código HTML

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

Código Javascript dentro do controlador

 $ scope.arr1 = [1,2];
 $ scope.arr2 = [1,2];

Este código está me dando a resposta correta

 0, 0
 0, 1
 1, 0,
 1, 1

Mas se eu usar ng-if="true" no loop filho, isso me dará a resposta errada

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

Isso estava errado. Ele muda o índice pai para o índice filho

Por favor, corrija este problema

Fonte

kishanmundha

Comentários muito úteis

Este não é um problema no Angular. Isso acontece ( conforme documentado ), porque ngIf cria um novo escopo, então $parent não se refere ao escopo do ngRepeat externo.

É por isso que usar $parent não é uma boa prática aqui. Você pode / deve usar ngInit para criar um alias do índice pai, como este:

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

Demo

gkalpak em 10 set. 2015

👍4

Todos 3 comentários

Este não é um problema no Angular. Isso acontece ( conforme documentado ), porque ngIf cria um novo escopo, então $parent não se refere ao escopo do ngRepeat externo.

É por isso que usar $parent não é uma boa prática aqui. Você pode / deve usar ngInit para criar um alias do índice pai, como este:

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

Demo

gkalpak em 10 set. 2015

👍4

BTW, esta é uma pergunta de suporte geral. Essas questões devem ser melhor direcionadas aos canais apropriados .
Os problemas do GitHub são reservados para relatórios de bugs e solicitações de recursos.

gkalpak em 10 set. 2015

Obrigado,

Eu posso usar isso por ng-init

kishanmundha em 10 set. 2015

Esta página foi útil?

0 / 5 - 0 avaliações