Question

我每隔几秒就从服务器刷新一次数据。一切都运行得很好，但是有一会儿数据会加倍，而Angular会显示以前的数据，并且正在添加下一个数据。这对于ng-animate来说尤为明显，因为每个元素都被动画化，然后再次出现

app.factory("models", function ($http) {
    return {
        models: [],
        fetchModels: function () {
            var models = this;
            $http.get("/models").success(function (serverModels) {
                models.models = serverModels;
            }); 
        });
    };
});

我认为部分问题源于覆盖整个阵列。 Angular中是否有一种简单的方法（或任何方式）只将新的serverModels元素推送到数组上，以便不必重写现有元素？

Answer 1

您可以在重复表达式中使用“track by”，以便Angular知道哪些项目是唯一且已经存在的，以及哪些项目是新的。

即使您完全覆盖了作用域上的数组，Angular也会知道将CSS动画应用于由于唯一键而导致的新动画。

<div ng-repeat="item in data track by item.id"> {{item.name }}</div>

Demo Plunker

从服务器刷新并仅更新新元素

1 个答案: