I am presenting a table detailing project names, captured in the image below.
When the delete button is clicked, I send the selected checkbox data as an array of objects to my controller:
[{id:1,name:'Name 8'},{id:2,name:'Name 7'}]
These names are then removed from the table on the server side. Everything functions properly, but how can I remove the rows from the DOM after deletion? I found this post that explains how to eliminate ng-repeat elements from the DOM, but it only removes one element at a time by passing the $index to the splice() function.
In my situation, I need to remove multiple rows. If I have to use the splice function in my controller, how do I obtain the index from the selected rows object? Alternatively, is there a more effective approach?
Hope my inquiry is comprehensible!
Update: jsFiddle
Solution: I needed to adjust @wickY26's solution slightly to match my scenario. Here is my updated jsFiddle.
What I did was in the "delete()" method, change the code to:
angular.forEach($scope.projects, function (row, index) {
if($scope.projects[index].checked) {
$scope.projects.splice(index,1);
}
});