AngularJS / JavaScript Splice - 总是从数组中删除第一个或最后一个项目

Posted 2023-05-09

【中文标题】AngularJS / JavaScript Splice - 总是从数组中删除第一个或最后一个项目

【英文标题】：AngularJS / JavaScript Splice - Always deletes first or last item from array

【发布时间】：2018-03-15 15:52:34

【问题描述】：

对 ul 中的列表项使用 ng-repeat 以重复 employeePayments 数组中的项，通过 $stateParams 访问并存储在 $scope.employeePayments 中。

每当我单击一个项目的删除按钮时，根据我尝试设置拼接功能的两种方式，它要么删除数组中的第一项或最后一项，而不是删除选定的项目通过它在数组中的索引找到它。

第一种方法 - 总是删除第一项：

$scope.deleteEmployeePaymentRow = function(employeePayment) 
    $scope.employeePayments.splice(employeePayment, 1);

第二种方法 - 总是删除最后一项：

$scope.deleteEmployeePaymentRow = function(employeePayment) 
    var index = $scope.employeePayments.indexOf(employeePayment);
    $scope.employeePayments.splice(index, 1);

-

ng-重复 html：

<tr data-ng-repeat="employeePayment in employeePayments">

    <td>employeePayment.code</td>

    <td>employeePayment.paymentType</td>

等等……

-

删除按钮 HTML：

<a data-ng-click="deleteEmployeePaymentRow(employeePayment)">Delete Payment</a>

【问题讨论】：

第二种方法应该有效。它可能会失败，因为employeePayment 不在数组中，所以indexOf 返回-1，使您的函数删除最后一个元素。你能向我们展示整个 HTML 部分吗？你也可以console.log(employeePayment)看看它到底是什么。

将employeePayment记录到控制台只返回undefined

【参考方案1】：

您可以使用 $index 直接从 ng-repeat 传递索引，

<a data-ng-click="deleteEmployeePaymentRow($index)">Delete Payment</a>

然后在delete方法中，试试这个

$scope.deleteEmployeePaymentRow = function(index) 
    $scope.employeePayments.splice(index, 1);

【讨论】：

这对我不起作用。它一次删除多个项目，并且总是将第一个留在数组中

请检查这个fiddle，没问题

【参考方案2】：

第一个方法删除第一个项目，因为您将splice 对象作为第一个方法传递，而它应该是一个数字。

第二种方法的作用是因为$scope.employeePayments.indexOf(employeePayment) 无法在数组中找到employeePayment。在这种情况下，indexOf 将返回 -1，拼接解释为“删除最后一个元素”。

在您的第二种方法中，可能值得在 console.log 中推一下，看看为什么 indexOf 无法找到您的对象。

【讨论】：

将employeePayment记录到控制台只是返回未定义

tr 中的删除按钮是否带有循环？如果您可以分享其余的代码，那将会很有帮助。

【参考方案3】：

尝试使用索引删除按钮编辑您的按钮：-

<a ng-click="deleteEmployeePaymentRow($index)">Delete Payment</a>

在控制器中

$scope.deleteEmployeePaymentRow = function(index) 
  // first check if its correct row deleting LOG it
   var deleteRow = $scope.employeePayments[index];
   console.log(deleteRow);

如果要从数组中删除正确的行：

$scope.deleteEmployeePaymentRow = function(index) 
  // first check if its correct row deleting LOG it
   var deleteRow = $scope.employeePayments[index];
   console.log(deleteRow);
   $scope.employeePayments.splice(index, 1);

如果只想让 index 处的元素不存在，但又不想改变其他元素的索引：

  $scope.deleteEmployeePaymentRow = function(index) 
  // first check if its correct row deleting LOG it
   var deleteRow = $scope.employeePayments[index];
   console.log(deleteRow);
   delete $scope.employeePayments[index];