How do I delete an item or object from an array using ng-click?

Question

I am trying to write a function that enables me to remove an item when the button is clicked but I think I am getting confused with the function - do I use $digest?

HTML & app.js:

<ul ng-repeat="bday in bdays"> 

<li> 

<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span> 

<form ng-show="editing" ng-submit="editing = false"> <label>Name:</label> 

<input type="text" ng-model="bday.name" placeholder="Name" ng-required/> 

<label>Date:</label> 

<input type="date" ng-model="bday.date" placeholder="Date" ng-required/> 

<br/> 

<button class="btn" type="submit">Save</button>

<a class="btn" ng-click="remove()">Delete</a> 

</form> 

</li> 

</ul> $scope.remove = function(){

 $scope.newBirthday = $scope.$digest();

};

Answer 1

If you want to delete an item or object from an array using ng-click then you need to remove it from an array and can pass bday item to your remove function in markup. Then in controller look up the index of item and remove from array.

<a class="btn" ng click="remove(item)">Delete</a>

This is the controller code:-

$scope.remove = function(item) { 

  var index = $scope.bdays.indexOf(item);    

  $scope.bdays.splice(index, 1);

}

Angular will automatically detect the change to the bdays array and do the update of ng-repeat.