CODEWITHSUNDEEP
javascriptajaxarraysangularjs
Explosion Pills
Explosion Pills

Reputation: 191779

Refresh from server and only update new elements

I'm refreshing data from the server every several seconds. Everything works pretty well, but for a moment the data will be doubled while the previous data is being displayed by Angular and the next data is being added in. This is especially obvious with ng-animate since every element is animated out and then in again.

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

I think that part of the problems stems from overwriting the entire array. Is there a simple way (or any way for that matter) in Angular to only push new serverModels elements onto the array so that existing elements don't have to be rewritten?

Upvotes: 2

Views: 69

Answers (1)

Michael Kang
Michael Kang

Reputation: 52867

You can use 'track by' in your repeat expression so that Angular knows which items are unique and already exists, and which items are new.

Even though you completely overwrite the array on scope, Angular will know to apply CSS animations to items that are new because of the unique key.

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

Demo Plunker

Upvotes: 2

Related Questions