angularjs - 更新数组时如何避免刷新 ng-repeat DOM 列表

Question

我正在构建一个邮件系统的前端。它很好地分为 Controller 和服务。我正在使用 $interval 来检查以 JSON 格式接收并添加到模型中的新邮件。

一切都很好地呈现在屏幕上，并带有复选框以选择要删除的邮件和按钮等...

问题是，当一个人在做选择时 - $interval 将检查新邮件，并用传入的数据替换模型数组，重新创建 DOM 并重置所有选择，无论它是否包含新的或相同的数据。前端的整个想法是避免用户一直点击“更新”。

我认为 angular.copy 可以让我免于头疼，但不......我阅读了所有关于在模型中包含日期以区分传入模型和现有模型的奇怪内容。

对于这个问题，我只能想出一个解决方案，那就是自己编写函数，将传入和现有数组与两个对象上的所有现有属性进行比较。外汇。 obj1.id == obj2.id 然后检查属性，如果不存在则添加对象。

我在 Knockout 中被宠坏了，因为它处理这类事情。 (当将相同的 JSON 数组发送到 observable 时，它​​不会重新创建 dom - 单独留下我的复选框/dom 更改)。

有没有人对这个问题有一个很好的解决方案，或者任何人都可以推荐某种黑客？我对一切都持开放态度!我已经绝望了。

Answer 1

我找到了解决办法!

在我的场景中四处探索并进一步检查“跟踪”之后，我可以看到它实际上做了更多它所说的:

1) 如果你有一个对象集合，每个对象都有:id、name、description，你可以使用“track by”选择一个它连接的属性，这样，在从网络服务中检索一个新的对象集合时，它不会呈现属于该值的 DOM 对象。

2)最重要的是，我追求的是:如果一个具有现有 id 的对象从服务器到达并更改了名称，它会反射(reflect)在具有该 id 的对象的数组集合中吗？是的，它会!因此，“track by”实际上会检查传入对象的属性并替换旧对象，但仍不理会id。那很激烈。

还值得注意的是，“track by”也适用于除 之外的其他指令。 ng-repeat ，例如 选择 .

我做了一个小演示，供其他可能对一切工作原理感到困惑的人......但它似乎很酷!

    <div ng-repeat='country in countryArray track by country.id'>
        {{country.id}}
        {{country.name}}
        <input type="checkbox"></input>
    </div>

    <div>
        <select ng-model='nonExisting' 
          ng-options='country.name for country in countryArray 
            track by country.id'></select>
    </div>
</div>

http://jsfiddle.net/KUf8C/