AngularJS / JavaScript Splice-總是從數組中刪除第一個或最后一個項目

Question

對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-repeat 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>

Answer 1

您可以使用$ index直接從ng-repeat傳遞索引，

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

然后在刪除方法中嘗試

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

Answer 2

因為你通過第一種方法刪除第一條splice的對象作為第一個方法，而預期的數字。

第二種方法執行其操作，因為$scope.employeePayments.indexOf(employeePayment)無法在數組中找到employeePayment 。 在這種情況下， indexOf將返回-1，剪接解釋為“刪除最后一個元素”。

在第二種方法中，最好將console.log塞進去，以查看為什么indexOf不能正確地找到您的對象。

Answer 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);
}

如果只想使索引處的元素不再存在，但又不想更改其他元素的索引：

  $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];
  }