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

Question

Angular

Hello!

I want to update the list of incoming orders on the current page by timer. I understand that it's cooler to do this through web sockets, but that's later :) For now, I want to.

The data is output through ngRepeat with track by - I read in the docs that in this way the angular knows the exact element identifier, and does not invent it itself, and, as I understand it, when the data array is updated - if the identifiers match, then the DOM of such elements will not be touched. But everything is wrong with me - everything is redrawn anyway :( The data in the controller is updated like this:

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

Output like this:

<tr data-ng-repeat="order in $ctrl.orders track by order.id">
...

Tell me, please, what am I doing wrong? Thank you!

Answer 1

As far as I understand, what you wrote about the rerender will work in the case when an array is pushed / popped. And when the array is replaced by a completely different one, a full re-render occurs.

Answer 2

If you are redrawing, then the identifiers (order.id) do not match, check that there are identifiers and they are of a simple type (number/string).
If most of the identifiers do not match, then it is more efficient to use track by $index.

Answer 3

$scope.$apply();