1

Using ng-repeat for list items in a ul to repeat the items in an employeePayments array, access via $stateParams and stored in $scope.employeePayments.

Whenever I click on the delete button for an item, depending on the two ways I've tried to set up the splice function, it either deletes the first item or the last item from the array, rather than deleting the item selected by finding it via its index in the array.

First method - Always deletes the first item:

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

Second method - Always deletes the last item:

$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>

etc...

-

Delete button HTML:

<a data-ng-click="deleteEmployeePaymentRow(employeePayment)">Delete Payment</a>
Improve this question
2
  • Second method should work. It probably fails because employeePayment is not in the array, so indexOf return -1, making your function deleting the last element. Can you show us the whole HTML part ? You can also console.log(employeePayment) to see what it is actually. Commented Oct 4, 2017 at 9:49
  • Logging employeePayment to the console just returns undefined Commented Oct 4, 2017 at 10:10

3 Answers 3

Reset to default
4

You can directly pass the index from ng-repeat using $index,

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

Then in the delete method, try this

$scope.deleteEmployeePaymentRow = function(index) {
    $scope.employeePayments.splice(index, 1);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This isn't working for me. It's deleting more than 1 item at a time, and always leaves the first in the array
Please check this fiddle, it worls fine
0

The first method deletes the first item because you pass splice an object as the first method, whereas it is expected a number.

The second method does what it does because $scope.employeePayments.indexOf(employeePayment) is unable to find employeePayment in the array. In this case indexOf will return -1, which splice interprets as "delete the last element".

It may be worth shoving in a console.log in your second method to see why exactly indexOf isn't managing to find your object.

Improve this answer

2 Comments

Logging employeePayment to the console is just returning undefined
Is your delete button within the tr with the loop on it? If you could share the rest of your code that would be helpful.
0

Try to delete using index edit your button as :- 

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

and in controller

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

If you want to remove correct row from the array:

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

If you just want to make the element at index no longer exist, but you don't want the indexes of the other elements to change:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.