Html angularjs 使用 splice 函数删除选定的项目

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17362099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:34:14  来源:igfitidea点击:

angularjs remove Selected Items using splice Function

javascripthtmlangularjsangularjs-ng-repeat

提问by Sizzling Code

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.

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

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

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

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

这是我的旧问题链接 Angularjs,对表中选定的复选框应用操作

I want it to execute using a Splice Function.

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

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

这是我迄今为止尝试过的 Plunker 链接。Plunker 链接显示我的执行

回答by Stewie

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

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

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

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

So, your removefunction should be written as:

所以,你的remove函数应该写成:

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

DEMO PLUNKER

演示 Plunker

EDIT:

编辑:

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

我想你想通过单击“x”按钮来删除这些项目,并用 ng-click 指向remove函数。

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:

要通过单击复选框删除项目,您应该将复选框 ngModel 设置为 student 属性,然后在学生上放置 $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

PLNUKER

回答by Ajay Beniwal

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

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

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

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