Geek Answers Handbook

How to avoid updating the ng-repeat DOM list when updating the array

I am creating an interface for the mail system. It is perfectly divided into controllers and services. I use $ interval to check for new emails that are received in JSON and added to the model.

Everything becomes well displayed on the screen with check boxes for selecting letters to delete and buttons, etc.

The problem is that when a person makes a choice - $ interval checks for new letters and replaces the model array with incoming data, recreates the DOM and performs a reset of all options, regardless of whether it contains new or the same data. The whole idea of ​​the front-end is to not press the refresh button all the time.

I thought angular.copy could save me from headaches, but no ... I read all kinds of weird things about including dates in your model for the difference between an incoming and an existing model.

I can only find one solution to this problem, which means writing the functions themselves, which compare the incoming and existing array with all existing properties for both objects. Fx. obj1.id == obj2.id then check the properties or add an object if it does not exist.

I was spoiled by rotten knockout because he deals with such things. (when sending the same JSON array to the observable, it will not recreate the dom - leaving my checkbox / dom changes separately).

Does anyone have a good solution to this problem or can anyone recommend some hack? I am open to everything! I am not in despair.

+6
source share
3 answers

I have found a solution!

After I talked and checked the “track” for my scripts, I see that he actually does more, which says:

1) If you have a collection of objects, with each object having: id, name, description, you can use the 'track by' to select the property to which it connects, and therefore get a new collection of objects from webservice, it does not will display a DOM object belonging to this value.

2) The most important thing, and what I was after: If an object with an existing identifier comes from a server with the changed name fx, will it be displayed in the array collection on the object with this identifier? Yes it will be! Thus, "track by" actually checks the properties of the incoming object and replaces the old object and still leaves it. It is intense.

It is also worth noting that "track by" also works with directives other than ng-repeat , for example, select .

I did a small demo for other people who may be confused about how everything works ... but it seems like it is cool!

<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/

+14
source

AngularJS ng-repeat support track can help you here. By default, it uses the generated $$ hashekey, but this behavior can be overridden. Therefore, if your records have unique identifiers, you can use the track to make sure that the DOM does not recover.

Ben Nadel made a post on this http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm

+2
source

You must use the object to track selected emails.

Basically you save the selected object in your area and use it to keep track of which letters are selected. For example, if you selected email 7, do selected[7] = true .

So in the psuedoish code

 selected = {} user selects email 7 then selected[7] = true selected == { 7: true } user unselects email y then selected[7] = false selected == { 7: false }

Here is jsFiddle, which maybe got a little carried away. I use the technique described above to track which emails are selected.

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

In the violin, I also track new letters in the same way.

+1
source

More articles:


All Articles