Se você fizer uma pesquisa na web por Angular ng-repeat, é claro que obterá a documentação de ng-repeat, mas também encontrará várias postagens de blog sobre como otimizar ng-repeat usando a track by
opção. Consulte http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/ , por exemplo. Aviv usa o seguinte exemplo
<ul class="tasks">
<li ng-repeat="task in tasks" ng-class="{done: task.done}">
{{task.id}}: {{task.title}}
</li>
</ul>
Aqui, o código assume uma série de objetos de tarefa, por exemplo
$scope.tasks = [{id: 1, title: "First task"}, ...]
Com este código, quando tasks
for atualizado, digamos que uma nova tarefa seja enviada ao final do array, o Angular irá desconstruir e construir completamente os li
elementos na repetição do ng. Seria incrível se o angular atualizasse apenas as tarefas modificadas e os elementos DOM relacionados. Podemos fazer isso com a simples mudança de
ng-repeat="task in tasks track by $index"
do
ng-repeat="task in tasks track by task.id"
No entanto, track by
pode parecer um bug se você estiver repetindo uma lista como a seguinte [0,0,1,2,3]
e atualizada para [0,1,2,3,4]
. Nesse caso, o valor de rastreamento,, $index
nunca muda, portanto, os elementos DOM não serão atualizados. Aqui está minha solução:
ng-repeat="value in arrasy track by array_hash($index, value)"
Onde
$scope.array_hash = function(index, value) {
return String($index) + '-' + String(value);
}
Agora, o track by
valor muda para as mudanças de índice e valor. Claro que há problemas aqui, estou assumindo que String(value)
faz sentido. Você terá que modificar conforme apropriado para seu caso de uso.