ng-repeat mit track by über mehrere Eigenschaften

Question

Ich habe ein Problem mit angular ng-repeat-Direktive. Momentan arbeite ich an einem Projekt, wo ich von der API eine Liste von Elementen bekomme (manchmal könnte es 1k Elemente sein) und diese Liste sollte alle 5 Sekunden aktualisiert werden (es ist ein Monitoring-Projekt).

Wenn die Listenlänge ein wenig größer ist, könnte die Website beim erneuten Rendern von DOM "langsam" werden. Es kommt heraus, dass eckig das ganze DOM regeneriert (aber 95% des Artikels sind gleich!)

Einer der möglichen Ansatz ist es, "track by" Ausdruck zum Beispiel zu item.id. Aber hier kommt ein weiteres Problem, ich möchte auch Elemente neu generieren, wenn zum Beispiel Beschreibungen von einem anderen Benutzer geändert wurde. Seit track by ist Ausdruck für item.id Änderungen in item.description wurde nicht aktualisiert Element in DOM.

Es gibt eine Möglichkeit, über mehrere Eigenschaften zu verfolgen? Vielleicht eine Funktion? Oder vielleicht Vergleich mit "Hand"?

Irgendwelche Ideen, Code-Beispiele Ich würde schätzen :)

UPDATE

, was ich entdecken, wenn ich verfolgen, indem gesetzt Winkel item.id hat für Gegenstände nicht wieder Kreta html, aktualisieren Sie einfach Wert in bereits erstelltem Element und es scheint "schneller" zu sein als Entfernen und Erstellen. Zuvor war ich ein bisschen anders.

FIX

Für diejenigen, die für eine bessere Leistung über> 1k Artikel in ng-repeat USE Spur von item.id es Ihre Leistung wird Boost suchen;)

Answer 1

Basierend mein Wissen, das angularjs-Modell ist an die ui-Ansicht gebunden, so dass das Modell über $ apply oder $ digest erneut reriert, sobald sich der Wert geändert hat. In diesem Fall binden Sie den Modellwert an die ui-Ansicht, möchten aber die Ansicht nicht erneut rendern, wenn sich der Wert nicht geändert hat, das ist nicht möglich. das ist was ich weiß.

jedoch können Sie nur das Dom-Element manipulieren. beispiels speichern die Daten an eine variable

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

in html, manuelle append oder Direktive anzuhängen, dann die ID zu dem Element zuzuordnen,

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

Prüfung und vergleichen den Wert, basierend ur braucht. einmal gefunden, dann eckle.element ("# yourid"). Text()

Dies wird Ihre Browserressourcen Probleme lösen zu lösen.

Answer 2

Wie der Kommentar vorgeschlagen, dass Sie so etwas wie dies versuchen könnten:

Dies könnte, wenn die Liste Änderungen

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

neu gerendert mit der Anzahl der DOM-Elemente helfen wird:

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

In Ihrem Controller .

Answer 3

Sie müssen keine Funktion zum Verfolgen von Multi-Eigenschaften erstellen. Sie tun können:

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