Tengo dificultades para comprender cómo funciona la pista por expresión de ng-repeat en angularjs. La documentación es muy escasa: http://docs.angularjs.org/api/ng/directive/ngRepeat
¿Puede explicar cuál es la diferencia entre esos dos fragmentos de código en términos de enlace de datos y otros aspectos relevantes?
con: track by $index
<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
<input ng-model="value[key]">
</div>
sin (misma salida)
<!--names is an array-->
<div ng-repeat="(key, value) in names">
<input ng-model="value[key]">
</div>
javascript
angularjs
angularjs-ng-repeat
Jonathan Grupp
fuente
fuente
Respuestas:
Puede hacerlo
track by $index
si su fuente de datos tiene identificadores duplicadosp.ej:
$scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]
No puede iterar esta colección mientras usa 'id' como identificador (id duplicado: 1).
NO FUNCIONA:
pero puede, si usa
track by $index
:fuente
un breve resumen:
track by
se utiliza para vincular sus datos con la generación DOM (y principalmente la regeneración) realizada por ng-repeat.cuando agrega
track by
, básicamente le dice a angular que genere un solo elemento DOM por objeto de datos en la colección dadaesto podría ser útil al paginar y filtrar, o en cualquier caso en el que se agreguen o eliminen objetos de la
ng-repeat
lista.por lo general, sin
track by
angular vinculará los objetos DOM con la colección inyectando una propiedad expando -$$hashKey
- en sus objetos JavaScript, y lo regenerará (y volverá a asociar un objeto DOM) con cada cambio.explicación completa:
http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm
una guía más práctica:
http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
(Track by está disponible en angular> 1.2)
fuente
Si está trabajando con objetos rastreados por el identificador (por ejemplo, $ index) en lugar de todo el objeto y vuelve a cargar sus datos más tarde, ngRepeat no reconstruirá los elementos DOM para los elementos que ya ha renderizado , incluso si los objetos JavaScript de la colección tienen sustituido por otros nuevos.
fuente