web-dev-qa-db-fra.com

Comment supprimer un élément du tableau avec un filtre dans AngularJS?

Lorsque je clique sur tr sans aucun filtre, ma fonction array.splice() fonctionne. Les index du tableau sont dans le bon ordre, donc la fonction array.splice() fonctionne.

Lorsque le filtre est activé, les index du tableau ne sont pas mis à jour et toujours dans le même ordre. Ainsi, array.splice() supprime le mauvais élément.

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

Comment mettre à jour l'index dans le tableau? Ou comment supprimer le bon article?

javascriptarraysangularjsfilterangularjs-ng-repeat
12
Steffi

La solution la plus simple serait de changer votre fonction de suppression pour prendre le projet au lieu de l'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);
        }
    }
}

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

8
Shawn C.

Il est plus facile de raccorder vos projets à la position réelle de l'élément dans le tableau à l'aide de indexOf.

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

De cette façon, vous devez passer à la fonction de suppression uniquement le projet en cours.

<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>
21
Victor Ivens