AngularJS父ng-repeat循环中$index值获取异常问题

我来帮你搞定这个$index不对的问题～

你遇到的核心问题是**ng-if会创建自己的子作用域**，导致你用$parent.$index时，拿到的并不是ng-repeat迭代项对应的$index。另外，如果你使用了orderBy过滤器，$index本身对应的是过滤后数组的索引，这也可能和你期望的原数组索引不符。

解决方案1：用ng-init存储索引（最直接） #

在ng-repeat的<li>标签上添加ng-init，把当前迭代的$index存为一个变量，这样在ng-if内部可以直接使用这个变量，完全避开作用域的问题：

<li ng-repeat="joinMember in data.teamMember | orderBy:'member.screenName || member.fname'" ng-init="currentMemberIndex = $index">
  <!-- 其他内容保持不变 -->
  <div ng-if="data.canModify" class="membr-delete">
    <a ng-href="">
      <i class="fa fa-trash text_link" aria-hidden="true" ng-click="deleteTeamMember(currentMemberIndex, joinMember.id)"></i>
    </a>
  </div>
</li>

解决方案2：直接传递joinMember而非索引（更推荐） #

其实很多时候你不需要传递索引，直接把joinMember对象传给deleteTeamMember函数，在函数内部根据joinMember.id去原数组中找到对应的项并删除，这样更健壮，也不会受过滤器或作用域的影响：

模板修改：

<i class="fa fa-trash text_link" aria-hidden="true" ng-click="deleteTeamMember(joinMember)"></i>

控制器中的函数示例：

$scope.deleteTeamMember = function(member) {
  // 找到原数组中对应项的索引
  const targetIndex = $scope.data.teamMember.findIndex(item => item.id === member.id);
  if (targetIndex !== -1) {
    $scope.data.teamMember.splice(targetIndex, 1);
  }
};

为什么原来的$parent.$index不对？ #

AngularJS中，ng-repeat会为每个迭代项创建一个子作用域，而ng-if又会在这个子作用域上再创建一个新的子作用域。当你在ng-if内部使用$parent时，它指向的是ng-if的父作用域（也就是ng-repeat的子作用域），但如果作用域继承中出现变量遮蔽，或者orderBy改变了数组顺序，就会导致$index不符合预期。用ng-init存储索引可以直接在当前作用域中保留正确的值，避免这些问题。

内容的提问来源于stack exchange，提问作者Van Hog