🥇 Faixa angular por otimização e matrizes

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 byopçã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 tasksfor atualizado, digamos que uma nova tarefa seja enviada ao final do array, o Angular irá desconstruir e construir completamente os lielementos 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"

ng-repeat="task in tasks track by task.id"

No entanto, track bypode 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,, $indexnunca 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 byvalor 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.

Related Posts