La compréhension de la ngRepeat 'suivi par' expression

Je vais avoir du mal à comprendre comment le piste par expression de ng-repeat dans angularjs œuvres. La documentation est très rare: http://docs.angularjs.org/api/ng/directive/ngRepeat

Pouvez-vous expliquer quelle est la différence entre ces deux bouts de code est en termes de databinding et d'autres aspects pertinents?

avec: track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

sans (même résultat)

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>
  • Une grande question, avec de très bonnes réponses! C'est dommage que l'OP n'a pas accepter une réponse, ou ne pensez-vous pas que la question a été répondue correctement?
  • Vous avez raison! J'ai juste accepté de T J réponse.
InformationsquelleAutor Jonathan Grupp | 2014-03-31
  1. 89

    Vous pouvez track by $index si votre source de données en double dans les identificateurs

    par exemple: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

    Vous ne pouvez pas parcourir cette collection tout en utilisant 'id' identifiant (id double:1).

    NE FONCTIONNE PAS:

    <element ng-repeat="item.id as item.name for item in dataSource">
  //something with item ...
</element>

    mais vous pouvez, si vous utilisez track by $index:

    <element ng-repeat="item in dataSource track by $index">
  //something with item ...
</element>
    • merci pour votre réponse! Mais sûrement dupliquer les identifiants ne sont pas les seuls cas d'utilisation. J'aimerais aussi savoir ce qui se passe "sous le capot".
    • eh bien, c'est facile: il suffit de regarder les code, tout est open source 😉
    • Cette question est vieux, mais je pense toujours que cela pourrait aider à comprendre beaucoup mieux bennadel.com/blog/... version courte de l'explication ici docs.angularjs.org/error/ngRepeat/dupes
    • Une chose de plus à prendre en compte est que si vous pouvez utiliser la piste par la clé, vous obtiendrez de meilleures performances (blog.500tech.com/is-reactjs-fast ). Cette fonction vous permet d'associer un objet JavaScript avec un ngRepeat DOM (Document Object Model) nœud à l'aide d'un identifiant unique. Avec cette association, AngularJS n' $détruire et recréer les nœuds DOM inutilement. Cela peut avoir une énorme performance et l'expérience utilisateur des avantages (bennadel.com/blog/...).
    • J'ai une liste de 700 objets bizarres. Temps de rendu est passé de 4 secondes à 100ms. La piste doit être utilisé pour tous les ngRepeat est basé sur des données provenant de repos.
    • Je suis en mesure d'utiliser $index sans l'utilisation de la piste par. Comment?
    • est la propriété de la ngRepeat directive. docs.angularjs.org/api/ng/directive/ngRepeat l'Ajout de track by $index juste forces ngRepeat utiliser $index comme identifiant.
    • Merci. Je l'ai eu!
    • <element ng-repeat="item.id as item.name for item in dataSource"> - Ce n'est pas le travail, même si les valeurs de "source de données" ne sont pas de dup juste renvoie une erreur de syntaxe..
    • c'est pourquoi j'ai écrit "ne PAS TRAVAILLER", en majuscule et en gras ci-dessus le texte ^^ merci d'utiliser le deuxième exemple à suivre par $index
    • Oui, mais le fait qu'il ne fonctionne pas ne pas illustrer votre point. Il ne fonctionne pas en raison de corrompu syntaxe, pas à cause de la dup.

    InformationsquelleAutor nilsK
  2. 57

    un court résumé:

    track by est utilisé afin de relier vos données avec le DOM génération (et surtout de ré-génération) faite par ng-repeat.

    lorsque vous ajoutez track by en gros, vous dites angulaire de générer un seul élément du DOM par les données de l'objet dans la collection donnée

    ce qui peut être utile lors de la pagination et de filtrage, ou de tout cas où les objets sont ajoutés ou supprimés à partir de ng-repeat liste.

    généralement, sans track by angulaire fera le lien entre les objets DOM avec la collection par injection d'une propriété expando - $$hashKey dans vos objets en JavaScript, et de la régénérer (et re-associer un objet DOM) à chaque changement.

    explication complète:

    http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

    un plus guide pratique:

    http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

    (piste est disponible dans angulaire > 1.2 )

    InformationsquelleAutor Nuriel
  3. 7

    Si vous travaillez avec des objets suivi de l'identifiant de(par exemple, $index) au lieu de l'ensemble de l'objet et de vous recharger vos données plus tard, ngRepeat va pas reconstruire les éléments DOM pour les items, il a déjà rendu, même si le JavaScript les objets de la collection ont été remplacées par de nouvelles.

    • toute référence qui prouve cela?
    • est-il un moyen pour forcer le re-rendu? ou de toute autre contourner? je n'ai pas trouvé cette cité partout, mais je crois que c'est ce que la création d'un gâchis pour moi et j'ai déjà perdu beaucoup de temps.
    • n'utilisez pas de piste ou de modifier l'identifiant unique sur la modification de l'objet. Remarque vous ne pouvez pas modifier $index, il est recommandé de ne pas utiliser $index au lieu d'utiliser l'identificateur unique de l'objet (ex: id)
    InformationsquelleAutor ram1993