How to remove item from array in Service after using $filter in the Angularjs controller?

Question

I have a Service that provides a list of tasks. After getting this list by injecting dependencies into my controller I select a filter to order the completed tasks (task.done == true) to be last in the view list.

The problem is that after I apply the filter, the entries in the list are modified and I can no longer remove the item. Below my code.

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);
};






 });

Answer 1

Index is modified because your list does not have an attribute track by, it is used so that the angle can find the object and mark it if you do not enter the track by, it automatically creates a key called $$hash, which makes the object different.

To solve the problem, your screen should have in ng-repeat a text more so less: ng-repeat="task in tasks track by task.id"

More information can be found in the documentation here: https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

If your tasks have ID’s that are unique identifiers, they cannot be removed by the same from the list?

Note that when using the filter the angular has to make internal modifications to the objects so that they reposition inside the repeat.

Could use the track by as our friend Ricardo suggested, but I will leave here another solution suggestion that can be applied in many other parts of your project.

First we will add to every Array type object a new behavior through its prototype, thus doing.

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';
};

This new behavior added to array types looks for an object by its specific attribute and removes it from the list if it finds that value in that attribute. Doing a reverse while which is much faster since the order of the loop here doesn’t matter.

And then to use just just do that.

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

And just like that.

This concept can be applied to all your array operations because it makes you reuse the code, and can still create unit tests that make sure this new behavior is always OK.

I hope I’ve helped.