CODEWITHSUNDEEP
javascriptangularjs
Bharanikumar
Bharanikumar

Reputation: 25733

angular splice function deleting another record instead of actually selected record

angular splice function deleting another record instead of actually selected record. please find the code below.

in below demo code, Delete pat record, code will delete Max record. please check the below code

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}}      &nbsp;&nbsp;<a ng-click="delCustomer(item.FirstName)">Delete</a></li>
        </ul>
	</div>
    <script src="CustomerController.js"></script>
</body>
</html>

Upvotes: 0

Views: 99

Answers (1)

Siva
Siva

Reputation: 2785

You must send the record instead of just sending the FirstName to the function, It will try to match first name with array of records and it will always return -1 as index.

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}}      &nbsp;&nbsp;<a ng-click="delCustomer(item)">Delete</a></li>
        </ul>
	</div>
    <script src="CustomerController.js"></script>
</body>
</html>

Upvotes: 2

Related Questions