Question

我正在创建一个角度应用程序，它有一个带有ng-repeat的li和一个用于在ng-repeat中搜索输出的文本框，重复的项目有一个删除“X”按钮，它从DB中删除记录。我面临的问题是如何使用splice从数组中删除搜索记录。

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

转到上面的plnkr点击任何“x”而不进行搜索，然后它将从列表中删除。但是当你搜索某些东西时可以说ruby然后只有ruby会进入列表，但点击“x”它仍会出现。我需要帮助使用数组操作从数组中删除搜索字段，我不想再次重新生成该数组。

Answer 1

而不是仅使用索引作为参数，通过搜索数组中的json元素来计算索引。

像这样：

$scope.delete = function(project) {
  idx = $scope.projects.indexOf(project);
  $scope.projects.splice(idx, 1);
};

DEMO

Answer 2

问题是您的idx设置为$index。这是ng-repeat的索引，而不是数组的索引，因此当列表被过滤时，您现在正在删除错误的元素。（如果您在删除后清除搜索框，则会注意到这一点）

如果您将HTML更改为

<a href="" ng-click="delete(project)">X</a>

删除功能将接收需要删除的实际元素，并可以重写为

$scope.delete = function(project) {
  $scope.projects.splice($scope.projects.indexOf(project), 1)
};

Answer 3

原因是您要发送$ index用于删除，而不是传递id

 <a href="" ng-click="delete(project.id)">X</a>

<强> Working Demo

试试这个

$scope.delete = function(idx) {
  for ( var i = 0; i < $scope.projects.length; i++){
    if ($scope.projects[i].id === idx)
     {
         $scope.projects.splice(i, 1);
     }
  }
};

如何从AngularJS中的数组中删除搜索条目

3 个答案: