web-dev-qa-db-fra.com

ng-repeat avec track by sur plusieurs propriétés

J'ai un problème avec angular ng-repeat. Actuellement, je travaille sur un projet où, à partir de l'API, j'obtiens une liste d'éléments (parfois, il pourrait s'agir de 1k éléments) et cette liste devrait être actualisé toutes les 5 secondes (il surveille le projet associé).

Lorsque la longueur de la liste est un peu plus grande, le site Web pendant le nouveau rendu du DOM peut "ralentir". Il ressort que angular régénère tout le DOM (mais 95% des articles sont les mêmes!)

L'une des approches possibles consiste à définir l'expression "track by" par exemple sur item.id. Mais voici un autre problème, je veux également régénérer des éléments lorsque, par exemple, les descriptions ont été modifiées par un autre utilisateur. Puisque track by est l'expression de item.id, les changements dans item.description n'ont pas mis à jour l'élément dans DOM.

Il existe un moyen de suivre plusieurs propriétés? Peut-être une fonction? Ou peut-être faire une comparaison "à la main"?

Toutes les idées, exemples de code que j'apprécierais :)

MISE À JOUR

ce que je découvre en définissant track by sur item.id angular n'a pas recréé le code html pour les articles, il suffit de mettre à jour la valeur dans l'élément déjà créé et il semble être "plus rapide" que de supprimer et Auparavant, je pensais un peu différent.

CORRIGE

Pour ceux qui recherchent de meilleures performances sur> 1k éléments dans ng-repeat USE track by item.id cela augmentera vos performances;)

angularjsangularjs-ng-repeatangularjs-track-by
20
qwetty

Vous n'avez pas besoin de créer une fonction pour gérer la piste par plusieurs propriétés. Tu peux faire:

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

Comme le commentaire l'a suggéré, vous pouvez essayer quelque chose comme ceci:

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

Dans votre contrôleur:

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

Cela peut aider à réduire le nombre d'éléments DOM lorsque la liste change.

22
Wawy

D'après mes connaissances, le modèle angularjs est lié à la vue ui, donc le modèle sera rendu via $ apply ou $ digest une fois la valeur modifiée. dans votre cas, vous pouvez lier la valeur du modèle à la vue ui, mais vous ne voulez pas non plus restituer la vue si la valeur n'a pas changé, c'est impossbile. c'est ce que je sais.

cependant, vous pouvez simplement manipuler l'élément dom. par exemple stocker les données dans une variable

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

en html, ajout manuel ou utilisation d'une directive pour ajouter, puis attribuer l'id à l'élément,

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

vérifier et comparer la valeur, en fonction des besoins ur. une fois trouvé, puis angular.element ("# yourid"). text ()

cela résoudra les problèmes de ressources de votre navigateur.

0
Stupidfrog