ng-if 导致 $parent.$index 设置为 $index答案

【问题标题】：ng-if causing $parent.$index to be set to $indexng-if 导致 $parent.$index 设置为 $index
【发布时间】：2014-12-26 19:54:31
【问题描述】：

我有一个 ng-repeater，其中包含一个嵌套的 ng-repeater。在嵌套中继器中，我试图跟踪父母 $index 值，这很好用。但是，当我在引用 $parent.$index 的同一元素中引入 ng-if 时，父索引设置为子索引。对此有什么想法吗？代码正在运行here。一个例子是，我点击父 0 的索引 1 并获取索引 1 父 1 作为索引。

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>

【问题讨论】：

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

那是因为ng-if 在元素上创建了一个子作用域，所以$parent 实际上是它的直接 ng-repeat 的子作用域，而不是父作用域，并且 $index 再次是从它的直接继承的同一个 $index父级（即第二个 ng-repeat 的子域）。您可以使用 ng-init 为 ng-repeat 的特殊属性设置别名，并使用该属性而不是使用 $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>

Demo

【讨论】：