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

angularjs, html

Solution

To remove item you need to remove it from 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>

Then in controller:

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

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: If doing live updates with server would use a service you create using `$resource` to manage the array updates at same time it updates server

Problem

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(); }; ```

Original source