Mam trudności ze zrozumieniem, jak działa utwór wyrażony przez wyrażenie ng-repeat w angularjs. Dokumentacja jest bardzo rzadka: http://docs.angularjs.org/api/ng/directive/ngRepeat
Czy możesz wyjaśnić, jaka jest różnica między tymi dwoma fragmentami kodu pod względem wiązania danych i innych istotnych aspektów?
z: track by $index
<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
<input ng-model="value[key]">
</div>
bez (to samo wyjście)
<!--names is an array-->
<div ng-repeat="(key, value) in names">
<input ng-model="value[key]">
</div>
javascript
angularjs
angularjs-ng-repeat
Jonathan Grupp
źródło
źródło
Odpowiedzi:
Możesz,
track by $index
jeśli źródło danych ma zduplikowane identyfikatoryna przykład:
$scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]
Nie możesz iterować tej kolekcji, używając „id” jako identyfikatora (zduplikowany identyfikator: 1).
NIE DZIAŁA:
ale możesz, jeśli używasz
track by $index
:źródło
krótkie podsumowanie:
track by
jest używany w celu powiązania danych z generacją DOM (i głównie ich ponownym generowaniem) wykonaną przez ng-repeat.kiedy dodajesz
track by
, w zasadzie mówisz angularowi, żeby wygenerował pojedynczy element DOM na obiekt danych w danej kolekcjimoże to być przydatne podczas stronicowania i filtrowania lub w każdym przypadku, gdy obiekty są dodawane lub usuwane z
ng-repeat
listy.zazwyczaj bez
track by
angular łączy obiekty DOM z kolekcją, wstrzykując właściwość expando -$$hashKey
- do twoich obiektów JavaScript i ponownie ją generuje (i ponownie kojarzy obiekt DOM) przy każdej zmianie.pełne wyjaśnienie:
http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm
bardziej praktyczny przewodnik:
http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
(śledzenie jest dostępne pod kątem> 1,2)
źródło
Jeśli pracujesz z obiektami śledzonymi według identyfikatora (np. $ Index) zamiast z całym obiektem i ponownie załadujesz dane później, ngRepeat nie odbuduje elementów DOM dla elementów, które już wyrenderował , nawet jeśli obiekty JavaScript w kolekcji mają zostały zastąpione nowymi.
źródło