angularjs使用splice函数删除所选项目

时间:2013-06-28 10:02:29

标签: javascript html angularjs angularjs-ng-repeat

我一直在寻找一种从网格中删除项目的解决方案;这就是我之前发布问题的原因。但是当我从某人那里得到解决方案时,我认为它解决了这个问题,但它使用的是Filter方法。

但是,我希望使用Splice函数从GRID中删除项目。

这是我的旧问题链接 Angularjs, Applying Action on Selected Checkboxes in Table

我希望它使用Splice函数执行。

现在我面临的问题是将索引值传递给函数,以便在选择/获取该索引值时可以删除该项。我不知道如何解决它。

如果有人解决了问题,并提供了更新代码的演示链接,那就太好了。

以下是我迄今为止尝试过的Plunker链接。Plunker link to show my execution

2 个答案:

答案 0 :(得分:7)

JS array.splice方法的定义(来自MDN):

  

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

因此,您的remove函数应写为:

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

DEMO PLUNKER

修改

我想你想通过点击" x"来删除这些项目。按住ng键并指向remove功能的按钮。

要通过单击复选框删除项目,您应将复选框ngModel设置为学生属性,而不是将学生放在$ watcher上,以删除那些将此属性设置为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

答案 1 :(得分:6)

我已将ng-click添加到复选框以使其正常工作

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