0

Tenho um Service que fornece uma lista de tarefas. Após obter esta lista através da injeção de dependências no meu controller eu seto um filtro para ordenar que as tarefas concluidas (task.done == true) fiquem por ultimo na lista da view.

O problema é que depois que eu aplico o filtro, os indexes da lista são modificados e não consigo mais remover o item. Abaixo meu código.

app.service('Tasks', function() {
 var tasks = [
    {
       "id": 1,
       "name" : "Tomar café",
       "done" : false
    },
    {
       "id": 2,
       "name" : "Fazer Torrada",
       "done" : false
    },
    {
       "id": 3,
       "name" : "Limpar a casa",
       "done" : true
    }];

    this.getList = function() {
        return tasks;
    };

    this.removeTask = function(task) {
        tasks.splice(tasks.indexOf(task), 1);
    };

    this.setDone = function(index, task) {
        tasks.splice(index, 1, task);
    };

    this.saveTask = function(task) {
        tasks.push(task);
    };

});



app.controller('IndexCtrl', function($scope, Tasks, $filter) {

$scope.tasks = Tasks.getList();
$scope.tasks = $filter('orderBy')($scope.tasks, 'done', false);

$scope.removeTask = function (task) {
    Tasks.removeTask(task);
};






 });
2
  • A onde você está passando o método de Tasks.removeTask(task) no seu $scope.tasks? Não seria: $scope.tasks = Tasks.removeTask($scope.tasks); Commented 30/10/2015 às 11:22
  • Se estiver na view, acredito que seria algo como: ng-repeat="task in tasks | filter: removeTask" Commented 30/10/2015 às 11:28

2 Respostas 2

1

Se suas tasks possuem ID's que são identificadores únicos, não podem ser removidos pelo mesmo da lista?

Veja que ao utilizar o filter o angular tem que fazer modificações internas nos objetos para que eles se reposicionem dentro do repeat.

Poderia utilizar o track by como nosso amigo Ricardo sugeriu, porém vou deixar aqui outra sugestão de solução que pode ser aplicada em muitas outras partes do seu projeto.

Primeiro vamos adicionar a todo objeto tipo Array um novo comportamento através do seu prototype, fazendo assim.

Array.prototype.removeByAttr = function (valOfAttr, attr) {
    var i = this.length;

    while (i--) {
        if (this[i].hasOwnProperty(attr) && (this[i][attr] == valOfAttr)) {
            this.splice(i, 1);
            return;
        }
    }

    throw 'not found';
};

Esse novo comportamento adicionado aos tipos array procura um objeto pelo seu atributo especifico e remove da lista caso encontre aquele valor naquele atributo. Fazendo um while reverso que é muito mais rápido já que a ordem do loop aqui não importa.

E então para usar basta apenas fazer isso.

    this.removeTask = function(task) {
        tasks.removeByAttr(task.id, "id");
    };

E pronto.

Esse conceito pode ser aplicado para todas suas operações com array, pois faz você reutilizar o código, e ainda pode criar testes unitários que se certifiquem que esse novo comportamento está sempre OK.

Espero ter ajudado.

5
  • cara, obrigado por compartilhar essa outra forma de fazer, achei bem interessante. Me sobrou uma dúvida no trecho em que você diz "Fazendo um while reverso que é muito mais rápido já que a ordem do loop aqui não importa.", isso é relativo né? uma vez que o item pode estar tanto no começo do while, quanto no final, isso não tem como prever, confere? Commented 30/10/2015 às 11:55
  • @RicardoRodriguesdeFaria sim é relativo ao seguinte fator, "A ordem dos meus itens dentro do loop me importa?" nesse caso especifico não, pois como você mesmo disse ele pode estar no inicio ou no final do array e fazer validações e verificações para isso é muito mais custoso do que simplesmente percorrer a lista em reverso. Pode dar uma olhada em alguns testes aqui blog.jcoglan.com/2010/10/18/i-am-a-fast-loop Commented 30/10/2015 às 12:04
  • E o while reverso se torna mais rápido pois ele não precisa validar o final do loop pois quando chegar em 0 o while vai se tornar false e sair sozinho. Commented 30/10/2015 às 12:06
  • Claro que existem muitas outras formas de busca, busca binária, busca em profundidade, busca em nós e etc, etc. Para um caso tão simples assim não vale a implementação de algo tão complicado ou sofisticado. Commented 30/10/2015 às 12:07
  • Certamente, obrigado por esclarecer e compartilhar o post. Commented 30/10/2015 às 12:14
1

os indexes são modificados porquê sua lista nao tem um atributo track by, ele é utilizado para que o angular consiga encontrar o objeto e marca-lo, caso você não insira o track by, ele automaticamente cria uma chave chamada $$hash, o que faz com que o objeto passe a ser diferente.

Para resolver o problema, sua tela deve ter no ng-repeat um texto mais o menos assim: ng-repeat="task in tasks track by task.id"

Mais informações podem ser encontradas na documentação aqui: https://docs.angularjs.org/api/ng/directive/ngRepeat

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .