AngularJS：不使用ng-click获取ng-repeat中对象的$index方法

当然有办法啦！在ng-repeat渲染列表时，不用依赖ng-click也能把$index传递到控制器里，我给你整理了几个常用的场景和实现方式：

1. 用ng-init初始化时传递索引 #

如果希望在每个列表项渲染完成后立刻把索引传给控制器，可以用ng-init指令，它会在元素初始化时执行指定的控制器方法：

<div ng-repeat="item in vm.items" ng-init="vm.recordItemIndex($index, item)">
  <!-- 你的列表项内容 -->
</div>

然后在控制器里实现对应的方法：

app.controller('YourListController', function() {
  var vm = this;
  vm.recordItemIndex = function(index, item) {
    // 这里就能拿到当前项的$index和对应的item对象
    console.log('当前项索引：', index);
    // 你可以把索引存到item对象里，或者存在控制器的某个数组中
    item.listIndex = index;
  };
});

这种方式完全不需要点击操作，初始化时就自动完成索引的传递。

2. 直接把$index绑定到数据对象上 #

如果只是需要让每个数据对象自己带上索引，甚至不用调用控制器方法，直接在模板里赋值就行：

<div ng-repeat="item in vm.items">
  <!-- 用一个隐藏的span让Angular解析赋值表达式，不会影响页面显示 -->
  <span style="display: none">{{ item.index = $index }}</span>
  <!-- 你的列表项内容 -->
</div>

这样每个item都会新增一个index属性，控制器里直接访问item.index就能拿到对应的ng-repeat索引了，简单直接。

3. 自定义指令处理复杂场景 #

如果你的需求更复杂（比如需要在DOM渲染完成后做一些和索引相关的逻辑），自定义指令是个更灵活的选择：

<div ng-repeat="item in vm.items" pass-index-to-controller>
  <!-- 你的列表项内容 -->
</div>

然后定义这个指令：

app.directive('passIndexToController', function() {
  return {
    link: function(scope) {
      // 从ng-repeat的子作用域中获取$index和当前item
      var currentIndex = scope.$index;
      var currentItem = scope.item;
      // 调用控制器的方法传递索引
      scope.vm.processItemIndex(currentIndex, currentItem);
    },
    scope: false // 继承父作用域，确保能访问到控制器和ng-repeat的变量
  };
});

这种方式适合需要对索引做额外处理的场景，比如根据索引设置元素样式、或者异步操作时关联索引和数据。

小提醒 #

• $index是ng-repeat自动生成的子作用域变量，在ng-repeat的元素范围内直接用就能拿到，不用额外定义。
• 如果用了controllerAs语法（比如例子里的vm），要确保作用域能正确访问到你的控制器实例。

内容的提问来源于stack exchange，提问作者Ivan Luketić