ng - se causar $ parent. $ index a ser definido como $ index - angularjs, angularjs-scope, angularjs-ng-repeat

Eu tenho um repetidor de ng com um repetidor de ng aninhadocontido nele. No repetidor aninhado, estou tentando rastrear o valor do índice $ parent, isso funciona bem. No entanto, quando introduzo um ng-if no mesmo elemento que tem uma referência a $ parent. $ Index, o índice parent é definido como o índice do filho. Alguma idéia sobre isso? O código está sendo executado Aqui. Um exemplo seria: clico no índice 1 do pai 0 e obtenho o índice 1 pai 1 como índices.

JavaScript

var myApp = angular.module("myApp", []);

myApp.controller("ctrl", function($scope) {

$scope.arr = [["a","b","c"],["d","f","e"],["f","h","i"]];

$scope.logIndex = function(index, parent) {
console.log("index: " + index + ", parent: " + parent);
};

});

HTML

<ul>
<li ng-repeat="i in arr">
<ul>
<li ng-repeat="j in i">
<span ng-click="logIndex($index, $parent.$index)" ng-if="$index > 0">{{ j }}</span>
</li>
</ul>
</li>
</ul>

Respostas:

Isso é porque ng-if cria um escopo filho no elemento, então $parent é, na verdade, o escopo filho do ng-repeat imediato, não o pai, e o $ index é novamente o mesmo $ herdado do pai imediato (ou seja, o segundo childscope do ng-repeat). Você pode usar ng-init alias propriedades especiais de ng-repeat e use essa propriedade em vez de usar $ parent.

   <li ng-repeat="i in arr" ng-init="parentIndex=$index">
<ul>
<li ng-repeat="j in i">
<span ng-click="logIndex($index, parentIndex)" ng-if="$index > 0">{{ j }} </span>
</li>
</ul>
</li>

Demonstração