In AngularJS how to update data in ngRepeat via ajax without redrawing the DOM?

Hello!

I want the timer to refresh the list for incoming orders on the current page. Know what's cooler to do it using web sockets, but it later :) While I want so.

Data are displayed using track by with ngRepeat I read it in the docks, so angular know the exact item ID, instead of coming up with it myself, and I understand that the dataset will be updated - if the identifiers match, then the DOM of such elements won't move. But I'm not all repaints anyway :( the Data in the controller is updated:

$timeout(function () {
 self.orders = Order.query();
}, 30000);


Displays like this:


...


Tell me, please, what am I doing wrong? Thank you!
July 8th 19 at 11:26

Related questions

More answers about "In AngularJS how to update data in ngRepeat via ajax without redrawing the DOM?"
2 answers
July 8th 19 at 11:28
I understand what you wrote about rerender will work in the case when you do push/pop of array. And when the array is replaced by a completely different - there is a complete rerender.
That is, to avoid a full render does not? Only compare the current data and received from the server, and push to do new orders? - tristin_Hamill38 commented on July 8th 19 at 11:31
well, as it turns out. - willow.Hand commented on July 8th 19 at 11:34
Thank you! - tristin_Hamill38 commented on July 8th 19 at 11:37
You can do like so:

$interval(function () {
Order.query(function (orders) {
angular.merge(self.orders, orders);
});
}, 30000); - tristin_Hamill38 commented on July 8th 19 at 11:40
No, "track by" should work with the reassignment of the array. Redrawing may occur because of another code.
---
If you are working with objects that have an identifier property, you should track by the identifier instead of the whole object. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. - tanya.Bartell commented on July 8th 19 at 11:43
> And when an array is replaced with a completely different - there is a complete rerender.

No, it is not affected - Bianka0 commented on July 8th 19 at 11:46
In General, after the experiments the result was a conclusion that the redraw does not occur, if to do so:

Order.query(function (orders) {
self.orders = orders;
});

but not so:

self.orders = Order.query();

Now everything is super, but for some fields on the orders page I have a input field with ngModel to some of the data could change. And the above code overwrites them stupid.

For example, I want to be able to change phone:

And when the data timer is received from the server, so I haven't peresechenii - he, respectively, is the same, but mine is overwritten.

Can't figure out how beautiful it to get around... - tristin_Hamill38 commented on July 8th 19 at 11:49
A piece of html code with the phone, which was higher kusalsya:

< input type="phone" data-ng-model="order.phone" > - tristin_Hamill38 commented on July 8th 19 at 11:52
: it would be better to change the phone(and do all the editing) to a separate view ( e.g. pop-up). Then nothing will be overwritten. - willow.Hand commented on July 8th 19 at 11:55
: the fact that orders are always processed. This list - he's working, not hanging the whole day unchanged. And, for example, if you changed the amount of the order - I immediately got changed and took the order, and he was gone from the list. To do this a separate window - it will be uncomfortable to work with this interface. Yet save that compare the old list with the new orders and a new list of recurring positions with the old (look at ID) to replace those that have in the past (if you have any model through the shape edited in order not to lose their values).

In short, better web sockets, apply than to sculpt humpback :) And then the server will give only what is really new, without anything else. - tristin_Hamill38 commented on July 8th 19 at 11:58
July 8th 19 at 11:30
If you have redrawn, so the IDs (order.id) do not match, check the IDs and they have a simple type (number/string).
If most of the IDs does not match, it is more effective to use track by $index.

Find more questions by tags AngularAJAX