ng-repeat с треком по нескольким свойствам

Question

У меня проблема с угловой директивой ng-repeat. В настоящее время я работаю над некоторым проектом, в котором из API я получаю список элементов (иногда это может быть 1 тыс. Элементов), и этот список должен обновляться каждые 5 секунд (это проект, связанный с мониторингом).

Когда длина списка немного больше, веб-сайт во время повторного рендеринга DOM может "замедлиться". Получается, что угловые регенерируют весь DOM (но 95% предметов одинаковы!)

Один из возможных подходов - установить выражение "отслеживать", например, в item.id. Но здесь возникает еще одна проблема, я также хочу восстановить элементы, когда, например, описания были изменены другим пользователем. Поскольку отслеживание является выражением для item.id, изменения в item.description не обновляли элемент в DOM.

Есть способ отслеживать по нескольким свойствам? Может быть, какая-то функция? Или, может быть, сделать сравнение "рукой"?

Любые идеи, примеры кода, я был бы признателен:)

ОБНОВИТЬ

то, что я обнаружил, когда установил отслеживание в item.id angular, не создавало заново html для элементов, просто обновило значение в уже созданном элементе, и оно оказалось "быстрее", чем удаление и создание. Раньше я хоть немного отличался.

FIX

Для тех, кто ищет более высокую производительность, более чем 1 тыс. Элементов в треке USE -повторений ng-repeat по item.id, это повысит вашу производительность;)

Answer 1

Вам не нужно создавать функцию для обработки трека по нескольким свойствам. Ты можешь сделать:

<div ng-repeat="item in lines track by item.id+item.description">

Answer 2

Как говорится в комментарии, вы можете попробовать что-то вроде этого:

<select ng-model="item" ng-options="item.id as item.description for item in items track by itemTracker(item)">

В вашем контроллере:

$scope.itemTracker= function(item) {
  return item.id + '-' + item.description;
}

Это может помочь с количеством элементов DOM, которые будут перерисованы при изменении списка.

Answer 3

Основываясь на моих знаниях, модель angularjs привязана к представлению пользовательского интерфейса, поэтому при изменении значения модель будет переопределена через $apply или $digest. поэтому в вашем случае вы хотите связать значение модели с представлением пользовательского интерфейса, но также не хотите повторно отображать представление, если значение не изменилось, что невозможно. это то, что я знаю.

Тем не менее, вы можете просто манипулировать элементом DOM. например, хранить данные в переменной

var x = [{id:"id1",value:"v1"},{id:"id2",value:"v2"}]

в HTML, вручную добавить или с помощью директивы добавить, а затем назначить идентификатор для элемента,

<div id="id1">v1</div>

проверьте и сравните значение, исходя из ваших потребностей. когда найден, то angular.element("#yourid").text()

это решит проблемы ресурсов вашего браузера.