javascript - Angular : What do you do when you need to 'track by' but you don't have a unique property to track by?

Question

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

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 被 确保是唯一的怎么办？我如何跟踪多个属性？

3. track by 是否通过将被跟踪的属性放到 $$watchers 上来工作？就像 track by image.id 正在做类似 $scope.$watch(image.id, cb) 的事情吗？

Answer 1

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

2) 语法是“按表达式跟踪”。表达式可以是任何有效的 Angular 表达式，所以

track by image.src + image.caption

完全有效。

3) track by 不使用观察者。 ngRepeat 指令维护模型和 DOM 节点的内部映射，由表达式跟踪索引。它尝试尽可能重用 DOM 节点(和范围)。它唯一关注的是集合。