Compreender a expressão ngRepeat 'track by'
estou a ter dificuldade em compreender como funciona o track by expression of ng-repeat in angularjs. A documentação é muito escassa: http://docs.angularjs.org/api/ng/directive/ngRepeat
pode explicar qual é a diferença entre estes dois trechos de código em termos de databinding e outros aspectos relevantes?
com: track by $index
<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
<input ng-model="value[key]">
</div>
sem (mesmo resultado)
<!--names is an array-->
<div ng-repeat="(key, value) in names">
<input ng-model="value[key]">
</div>
3 answers
Pode track by $index se a sua fonte de dados tiver identificadores duplicados
E. g.: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]
Não pode iterar esta colecção ao usar o 'id' como identificador (ID duplicado:1).
NÃO VAI FUNCIONAR.:
<element ng-repeat="item.id as item.name for item in dataSource">
// something with item ...
</element>
Mas pode, se utilizar track by $index:
<element ng-repeat="item in dataSource track by $index">
// something with item ...
</element>
um breve resumo:
track by é usado para ligar os seus dados com a geração DOM (e principalmente re-geração) feita pela ng-repeat.
Quando adiciona {[[0]}, basicamente diz ao angular para gerar um único elemento DOM por objecto de dados na colecção indicada {[[9]}
Isto pode ser útil quando a chamada de pessoas e a filtragem, ou em qualquer caso em que os objectos sejam adicionados ou removidos da lista ng-repeat.
Normalmente, sem {[[0]} o angular ligará os objectos DOM com o colecção injectando uma propriedade expando - $$hashKey - nos seus objectos JavaScript, e irá regenerá-la (e associar de novo um objecto DOM) a cada alteração.
explicação completa:
Http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm
um guia Mais prático:
Http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
(track by está disponÃvel em angular > 1.2 )
Se você estiver trabalhando com objetos acompanhar pelo identificador(por exemplo, $Ãndice) em vez de o objeto inteiro e você recarregar os seus dados mais tarde, ngRepeat não irá reconstruir os elementos do DOM para itens tem já prestados, mesmo se o JavaScript objetos na coleção têm sido substituÃdos por novos.