An issue with the Angular splice function is causing it to delete the wrong record. Here is the code snippet in question.
Within the code below, when attempting to delete the record labeled "Pat," the code ends up deleting the record labeled "Max." Please review the code snippet provided.
function CustomerController($scope) {
$scope.list = [
{ ID:"1", FirstName: 'Bharani', LastName: 'Kumar', City: 'New Delhi' },
{ FirstName: 'Pat', LastName: 'J', City: 'Paris' },
{ FirstName: 'John', LastName: 'P', City: 'Washington DC' },
{ FirstName: 'Max', LastName: 'X', City: 'London' }
];
$scope.delCustomer = function (FirstName) {
var index = $scope.list.indexOf(FirstName);
$scope.list.splice(index, 1);
};
}<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
</head>
<body>
<div data-ng-controller="CustomerController">
<ul>
<li ng-repeat="item in list | filter:FirstNameSearch | orderBy:'FirstName':false">{{ item.FirstName +" , "+ item.LastName +" , "+ item.City}} <a ng-click="delCustomer(item.FirstName)">Delete</a></li>
</ul>
</div>
<script src="CustomerController.js"></script>
</body>
</html>