当ng-repeat中的ng-init重放时？

Question

我有一个简单的ng-repeat来构建一个来自javascript数组的HTML列表。 可以使用输入移动每个项目以获得新的排名。此输入绑定到变量rank。使用ng-init指令初始化此变量。

代码如下所示：

<li ng-repeat="item in ctrl.getItems()">
  <div ng-init="rank = $index">
    [$index: {{$index}}]
    {{item}}<br/>
    <label>
      Move to
      <input type="number" ng-model="rank"/>
    </label>
    <button type="button" ng-click="ctrl.moveItem($index, rank)">
      Ok
    </button>
  </div>
</li>

在运行时，当我更改输入值并单击“确定”按钮时，将调用函数ctrl.moveItem，并且项目实际上已在ctrl.getItems()数组中移动。

因此重播了ng-repeat，并且新订单中显示了商品。

但变量rank未重新初始化，并且两个项目的排名相同。

示例在这里：https://jsfiddle.net/nlips/4ng34b7b/

我的问题不在于如何在列表中移动项目，而是我需要了解ng-init在ng-repeat 的上下文中是如何工作的。

我在AngularJS官方文档中没有找到关于此主题的任何内容。

Answer 1

来自 AngularJS 文档：

  

ngInit 指令允许您评估当前范围内的表达式。

现在。您正在使用不同的范围。

您正在 ngInit 中使用转换范围，每次重复该部分模板时都会覆盖 $ scope.rank 。

如果你想坚持你的排名，你应该将其加入 ngRepeat范围。

尝试：

GET

编辑回答

好的，我明白了。 仅当将该部分模板呈现到DOM中时，才会评估 ngInit 表达式。

因此，当第一次加载页面时，会触发表达式并正确评估每个 rank 。

但是，当您对已经呈现的项目进行更改时，您的模板将不会再次呈现，因此您的ng-init不会被触发。

如果您希望再次执行 ng-init ，则必须从DOM中删除该项目，然后将其追加到新位置。

这种方法有几种替代方案，但我希望这可以澄清发生了什么。