Angular：当您需要 'track by' 但没有唯一的 属性 进行跟踪时，您会怎么做？

Question

假设我正在 ng-repeat 处理 images，这是一个包含 src 和 caption 属性 的对象数组。

var images = [
  {src: 'a.jpg', caption: 'a'},
  {src: 'b.jpg', caption: 'b'},
  {src: 'c.jpg', caption: 'c'},
  {src: 'd.jpg', caption: 'd'},
  {src: 'e.jpg', caption: 'e'},
  {src: 'f.jpg', caption: 'f'},
  {src: 'g.jpg', caption: 'g'},
  {src: 'h.jpg', caption: 'h'},
  {src: 'i.jpg', caption: 'i'},
  {src: 'j.jpg', caption: 'j'},
];

假设可能存在重复图像，因此 src + caption 组合不能确保唯一性。我想 track by，但除了 $index。

似乎没有其他方法可以做到

$index 对我来说似乎是一个糟糕的解决方案。想象一下，第一张图片 (a) 已被删除。然后所有后续图像的索引将被更改，因此整个列表将不得不重新呈现。这对于包含 10 个项目的列表来说还算不错，但对于更大的列表来说。

1. 想法?

2. 另外，如果 src + caption 是唯一的呢？我如何 track by 多个属性？

3. track by是否可以将跟踪的属性放到$$watchers上？就像 track by image.id 在做类似 $scope.$watch(image.id, cb)?

的事情

Answer 1

1) 你说得对。 $index 是给定约束的唯一途径，而且它不是最优的。

2) 语法为"track by expression"。表达式可以是任何有效的 angular 表达式，因此

track by image.src + image.caption

完全有效。

3) track by 不使用 watchers。 ngRepeat 指令维护模型和 DOM 节点的内部映射，这些节点由表达式的轨道索引。它尝试尽可能重用 DOM 个节点（和范围）。它唯一监视的是 collection.