【问题标题】:angularjs remove Selected Items using splice Functionangularjs 使用拼接功能删除选定项目
【发布时间】:2013-06-26 01:45:13
【问题描述】:

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

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

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

我希望它使用拼接函数来执行。

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

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

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

【问题讨论】:

  • 请看下面的拼接演示

标签: javascript html angularjs angularjs-ng-repeat


【解决方案1】:

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

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

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

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

DEMO PLUNKER

编辑:

我认为您想通过单击“x”按钮来删除项目,并且 ng-click 指向 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

【讨论】:

  • 已经这样做了,但这不会从网格中删除选定的项目。
  • 我附上的 plunker 链接证明并非如此。
  • 先生,我已经检查了您的 Demo Plunker 链接,我点击了第一个复选框和最后一个复选框,但它只从网格中删除了一项。
【解决方案2】:

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

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

【讨论】:

  • 谢谢您的回复,您的代码第一次运行良好,但是下次当我选择一个复选框时,它会删除 2 个值?
  • 我的意思是我第一次加载页面 -> 我选择复选框然后我单击删除,项目删除,但是当我单击另一个复选框并单击删除它时没有刷新页面删除 2 个项目。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-09
相关资源
最近更新 更多