angularjs remove Selected Items using splice Function

Question

I was looking for a solution to remove items from the Grid; that's why I posted the question before. But when I got the solution from someone, at that time, I thought it solved the issue, but it was using a Filter method.

However, I want the items to be removed from the GRID using a Splice Function.

Here is my old Question Link Angularjs, Applying Action on Selected Checkboxes in Table

I want it to execute using a Splice Function.

Right now the problem I am facing is to pass the index value to the function so that the item can be deleted if that index value is selected/fetched. I am not sure how to fix it.

It would be nice if someone solves the problem and gives a demo link to the updated code.

Here is the Plunker Link for what I have tried so far.Plunker link to show my execution

Answer 1

Definition of JS array.splice method (from MDN):

array.splice(index , howMany[, element1[, ...[, elementN]]])

So, your removefunction should be written as:

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

DEMO PLUNKER

EDIT:

I figured you wanted to remove the items by clicking the "x" button with ng-click pointing to remove function.

To remove the items by clicking the checkbox you should set checkbox ngModel to a student property and than put a $watcher on students that would remove those students who have this property set to true:

<tr class="color2" ng-repeat="student in students | filter:search | filter:new_search">
  <td>{{student.Rollno}} <input type="checkbox" ng-model="student.checked"> </td>
  <td>{{student.Name}}</td>
  <td>{{student.Uni}} <button ng-click="remove($index)">x </button></td>
</tr>

$scope.$watch('students', function(students){
   if(!students){
     return;
   }
  $scope.students = students.filter(function(student){
    return !student.checked;
  });
}, true);

PLNUKER

Answer 2

I have added ng-click to checkbox to make it working

http://plnkr.co/edit/DSVPj3holsf4nhNvEMbQ?p=preview