AngularJS：ng-repeat中的ng-init何时会重新执行？

我来帮你补全并完善这个功能，下面是完整的可运行代码，以及关键部分的细节解释：

完整代码实现 #

HTML结构 #

<div ng-app="rankAdjustApp" ng-controller="RankCtrl as ctrl">
  <ul>
    <!-- 用track by $index避免数组重排时DOM重复渲染问题 -->
    <li ng-repeat="item in ctrl.getItems() track by $index">
      <div ng-init="rank = $index">
        当前索引: {{$index}} | 内容: {{item}}<br/>
        <label>
          移动至排名:
          <!-- 绑定rank变量，限制输入范围避免无效值 -->
          <input type="number" ng-model="rank" min="0" max="{{ctrl.getItems().length - 1}}"/>
        </label>
        <!-- 点击按钮触发移动逻辑，传递当前项和目标rank -->
        <button type="button" ng-click="ctrl.moveItem(item, rank)">确认移动</button>
      </div>
    </li>
  </ul>
</div>

AngularJS控制器代码 #

angular.module('rankAdjustApp', [])
.controller('RankCtrl', function() {
  const vm = this;
  
  // 初始化示例数据数组
  vm.itemList = ["苹果", "香蕉", "橙子", "葡萄"];
  
  // 对外暴露获取列表的方法（和直接用vm.itemList效果一致，按需选择）
  vm.getItems = function() {
    return vm.itemList;
  };
  
  // 核心移动逻辑：把指定项移到目标排名位置
  vm.moveItem = function(targetItem, targetRank) {
    // 先处理边界：确保目标排名在数组有效索引范围内
    const validRank = Math.max(0, Math.min(targetRank, vm.itemList.length - 1));
    
    // 找到当前项在数组中的索引
    const currentIndex = vm.itemList.indexOf(targetItem);
    if (currentIndex === -1) return; // 找不到项则直接返回
    
    // 从原位置移除，再插入到目标位置
    vm.itemList.splice(currentIndex, 1);
    vm.itemList.splice(validRank, 0, targetItem);
  };
});

关键细节说明 #

1. 独立作用域的rank变量：每个ng-repeat会生成独立的子作用域，所以ng-init="rank = $index"会为每个列表项创建专属的rank变量，不同项的输入框不会互相干扰。
2. 双向绑定与输入限制：输入框通过ng-model="rank"实现双向绑定，同时添加min和max属性，防止用户输入超出数组范围的无效排名。
3. 数组重排逻辑：moveItem方法里用splice完成两步操作——先移除原位置的项，再插入到目标排名位置，AngularJS会自动监听数组变化，触发ng-repeat重新渲染列表。
4. track by $index：添加这个指令是为了避免数组元素顺序变化时，AngularJS销毁并重建所有列表DOM元素，既提升性能，也能避免元素重复时的报错。

可选优化点 #

• 如果你的列表项是复杂对象（而非简单字符串），建议给每个项加唯一ID，用track by item.id代替track by $index，这样更严谨。
• 可以在移动完成后，自动把输入框的rank重置为当前项的新索引，提升用户体验，只需在moveItem方法末尾添加rank = validRank;（不过要注意作用域，或者把rank直接存在item对象里更稳妥）。

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