Question

我正在构建邮件系统的前端。它很好地分散在控制器和服务中。我使用$ interval检查新邮件，这些邮件以JSON格式收到，并添加到模型中。

所有内容都可以很好地呈现在屏幕上，并带有复选框，可以选择删除和按钮等邮件...

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

我认为angular.copy可以让我免于头痛，但是没有......我读到了关于在模型中包含日期以在传入模型和现有模型之间进行区分的所有奇怪的东西。

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

我在Knockout被宠坏了，因为它涉及这些事情。（当将相同的JSON数组发送到observable时，它将不会重新创建dom - 单独留下我的复选框/ dom更改。）

有没有人能够很好地解决这个问题，或者有人推荐某种黑客攻击？我对一切都开放！我绝望了。

Answer 1

我找到了解决方案！

在四处寻找并进一步检查＆＃34;跟踪＆＃34;根据我的场景，我可以看到它实际上做的更多：

1）如果你有一组对象，每个对象都有：id，name，description，你可以使用＆＃39; track by＆＃39;选择它连接的属性，因此，在从Web服务检索新的对象集合时，它不会呈现属于该值的DOM对象。

2）最重要的是，我所追求的是：如果具有现有id的对象从服务器到达，并且fx名称已更改，那么它是否会在具有该ID的对象的数组集合中反映出来？是的，它会的！所以，＆＃34;跟踪＆＃34;实际上会检查传入对象的属性并替换旧对象并仍然保留id。那太激烈了。

还值得注意的是＆＃34;跟踪＆＃34;也适用于除 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/

Answer 2

通过对ng-repeat的支持，AngularJS跟踪可以帮助您。默认情况下，它使用生成的$$ hashekey，但可以覆盖此行为。因此，如果您的记录具有唯一ID，则可以使用track by来注意不重建DOM。

Ben Nadel在此http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm

上发了一篇文章

Answer 3

您应该使用对象来跟踪所选的电子邮件。

基本上，您在范围内保留selected个对象，并使用它来跟踪选择的电子邮件。例如，如果选择了电子邮件7，则创建selected[7] = true。

所以在psuedoish代码中

selected = {}

user selects email 7 then selected[7] = true

selected == {
  7: true
}

user unselects email y then selected[7] = false

selected == {
  7: false
}

这是一个jsFiddle，我可能已经被带走了一点点。我使用上述技术来跟踪选择的电子邮件。

http://jsfiddle.net/8kY9u/11/

在小提琴中，我也以类似的方式跟踪新电子邮件。

如何在更新阵列时避免刷新ng-repeat DOM列表

3 个答案: