javascript - ng-repeat 不使用 track by 更新模型

Question

我一直在使用 checklist-model 来处理一系列复选框，每个选定的复选框都可以删除。一切似乎都工作正常，直到我在 ng-repeat 中使用它。

问题是，当我添加 track by $index 以及 ng-repeat 时，删除的复选框仍然存在。如果我删除该 track by，它就可以正常工作(但在我的真实应用程序中，我需要该 track by 才能工作)。

这是一个 plnkr，Demo

要查看问题，您可以按照以下步骤操作。

1. 选择您想要的任何复选框
2. 删除那些选定的
3. 选中“全部选中”按钮即可查看，

现在看看带有 track by 的那个，它会留下一些复选框未选中。如果您手动检查，则会将旧值添加到列表中。这很奇怪。

任何帮助或解释将非常感激，谢谢

Answer 1

如果您仍然需要跟踪，请将其与对象的 id 一起使用。假设对象的 id 始终是唯一的。

使用多个跟踪函数来解析同一键是一种错误。 (这意味着两个不同的对象被映射到同一个 DOM 元素，这是不可能的。)

所以代替这个:

<tr ng-repeat="verb in verbs track by $index">
    <td>
      <input type="checkbox" checklist-model="list.verbs" checklist-value="verb.id">
    </td>
    <td>
      {{verb.id}}
    </td>
    <td>
      <span>{{verb.text}}</span>
    </td>
  </tr>

使用这个:

  <tr ng-repeat="verb in verbs track by verb.id">
    <td>
      <input type="checkbox" checklist-model="list.verbs" checklist-value="verb.id">
    </td>
    <td>
      {{verb.id}}
    </td>
    <td>
      <span>{{verb.text}}</span>
    </td>
  </tr>

http://plnkr.co/edit/UTtQQJIbtRPdGh0YhRMH?p=preview