How to remove item from array with filter in AngularJS?

Question

When I click on tr without any filter, my function array.splice() works. Indexes in the array are in the correct order, so the array.splice() works.

When the filter is enable, Indexes in the array are not updated and still in the same order. So array.splice() removes the wrong item.

    <span ng-click="orderP0 = 'statut_name'; reversePO=!reversePO">order</span>

    <tr ng-repeat="project in projects | orderBy : orderPO : reverse track by $index" ng-click="remove($event,$index,projects)">
        <span class="label" ng-bind="project.statut_name"></span>
    </tr>

    $scope.remove = function($event,index,array){
        array.splice(index,1);
    };

How to update index in the array ? Or How to removes the right item ?

Answer 1

The simplest solution would be to change your remove function to take in the project instead of the index.

$scope.remove = function(project){
    for(var i = $scope.projects.length - 1; i >= 0; i--){
        if($scope.projects[i].statut_name == project.statut_name){
            $scope.projects.splice(i,1);
        }
    }
}

Example Plunker: http://plnkr.co/edit/51SNVMQjG3dsmpYI5RyY?p=preview

Answer 2

It's easier to splice you projects in the actual position of the element in the array using indexOf.

$scope.remove = function(project){
    $scope.projects.splice($scope.projects.indexOf(project),1);
}

This way you need to pass to the remove function only the current project.

<tr ng-repeat="project in projects | orderBy : orderPO : reverse track by $index" ng-click="remove(project)">
    <span class="label" ng-bind="project.statut_name"></span>
</tr>