Как в AngularJS обновить данные в ngRepeat через ajax без перерисовки DOM?

Question

[Devate]

Здравствуйте!

Хочу по таймеру обновлять список поступивших заказов на текущей странице. Понимаю, что круче это делать через веб-сокеты, но это попозже :) Пока хочу так.

Данные выводятся через ngRepeat с track by - прочитал в доках, что таким образом ангуляр знает точный идентификатор элемента, а не придумывает его сам, и, я так понял, что когда массив данных обновится - если идентификаторы совпадут, то DOM таких элементов не тронется. Но у меня всё не так - все перерисовывается всё равно :( Данные в контроллере обновляются так:

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

Выводятся так:

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

Подскажите, пожалуйста, что я делаю не так? Спасибо!

Answer 1

[Николай]

Насколько я понимаю то что вы написали по поводу ререндера будет работать в случае, когда делается push/pop массива. А когда массив заменяется совершенно другим - происходит полный ререндер.

Comments

[Devate]

То есть, избежать полного рендера никак нельзя? Только сверять имеющиеся сейчас данные и поступившие с сервера, и делать push новых заказов?

[Николай]

ну как-то так получается.

[Devate]

Спасибо!

[Devate]

Можно делать типа так:

$interval(function () {
Order.query(function (orders) {
angular.merge(self.orders, orders);
});
}, 30000);

[napa3um]

Нет, "track by" должен работать и с переприсвоением массива. Перерисовка, возможно, происходит из-за другого кода.
---
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.

[lega]

> А когда массив заменяется совершенно другим - происходит полный ререндер.

Нет, это не влияет

[Devate]

В общем, после экспериментов получился такой вывод, что перерисовка не происходит, если делать вот так:

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

а не так:

self.orders = Order.query();

Теперь всё супер, но для некоторых полей заказов на странице у меня есть поля ввода с ngModel, чтобы некоторые данные можно было менять. И вышеуказанный вариант кода их тупо затирает.

Например, хочу иметь возможность менять телефон:

И когда данные по таймеру поступают с сервера, а телефон я ещё не пересохранил - он, соответственно, становится прежним, а мой - затирается.

Пока не могу придумать, как красиво это обойти...

[Devate]

Кусок html-кода с телефоном, который выше скушался:

< input type="phone" data-ng-model="order.phone" >

[Николай]

Devate: правильнее было бы сделать смену телефона(ну и вообще всё редактирование) в какой-то отдельной вьюшке ( например в попапе). Тогда ничего не будет затираться.

[Devate]

Николай: дело в том, что заказы всегда находятся в обработке. Этот список - он рабочий, не висит целый день неизменным. И, например, если поменялась сумма заказа - я сходу её тут же поменял и принял заказ, а он ушёл из списка. Делать для этого отдельное окошко - будет неудобно работать с таким интерфейсом. Пока выкрутился тем, что сравниваю старый список заказов с новым и в новом списке повторяющиеся позиции со старым (смотрю по ID) заменяю на те, что есть в последнем (если вдруг какие-то модели через форму редактировались - чтобы не потерять их значения).

Короче говоря, лучше веб-сокеты применить, чем лепить горбатого :) И тогда сервер отдаст только то, что реально новое, без всего остального.

Answer 2

[lega]

Если у вас происходит перерисовка, значит идентификаторы (order.id) не совпадают, проверьте что идентификаторы есть и они простого типа (число/строка).
Если большая часть идентификаторов не совпадает, то эффективней использовать track by $index.

Answer 3

[Dauren S]

$scope.$apply();