AngularJS How to remove an Item from scope

Simple ToDo list, but with a delete button on list page for each item!

enter image description here

1. Relevant template html:

    <tr ng-repeat="person in persons">
        <td>{{person.name}} - # {{person.id}}</td>
        <td>{{person.description}}</td>
        <td nowrap=nowrap>
            <a href="#!/edit"><i class="icon-edit"></i></a>
            <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
        </td>
    </tr>

2. Relevant controller method:

$scope.delete = function (person) {
    API.DeletePerson({ id: person.id }, function (success) {
    **// I NEED SOME CODE HERE TO PULL THE PERSON FROM MY SCOPE**
    });
};

I tried $scope.persons.pull(person)

I tried $scope.persons.remove(person)

Although the db deleted successfully, I can not pull this item from scope and I do not want to make a method call to the server for data the client already has, I just want to remove this one person from scope.

Any ideas?

Solution:

  1. Going for the index was the correct approach in the HTML:

  2. However, just changing the angular parameter to (idx) was not enough, I had to create an instance of that person to send off to the server for deletion.

    $scope.delete = function (idx) {

    var delPerson = $scope.persons[idx];

    API.DeletePerson({ id: delPerson.id }, function (success) {

        $scope.persons.splice(idx, 1);
    });
};

Thanks Guys!

Angular is GREAT and I encourage everyone who hasn't already to check it out! };

You'll have to find the index of the person in your persons array, then use the array's splice method:

$scope.persons.splice( $scope.persons.indexOf(person), 1 );

Your issue is not really with Angular, but with Array methods. The proper way to remove a particularly item from an array is with Array.splice. Also, when using ng-repeat, you have access to the special $index property, which is the current index of the array you passed in.

The solution is actually pretty straightforward:

View:

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

Controller:

$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};

I would use Underscore.js library that have list of good functions

without (DOC)

without_.without(array, *values) Returns a copy of the array with all instances of the values removed.

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); => [2, 3, 4]

Example

 var res = "deleteMe";

    $scope.nodes = [{
        name: "Node-1-1"
    }, {
        name: "Node-1-2"
    }, {
        name: "deleteMe"
    }];

    $scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {name: res}));

See Demo in Fiddle

filter (DOC)

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

=> [2, 4, 6]

Example

  $scope.newNodes = _.filter($scope.nodes, function(node) {
                return !(node.name == res);
            });

See Demo in Fiddle

$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

this works for me!

If you have any function associated to list ,when you make the splice function, the association is deleted too. My solution:

$scope.remove = function() {
    var oldList = $scope.items;
    $scope.items = [];

    angular.forEach(oldList, function(x) {
        if (! x.done) $scope.items.push( { [ DATA OF EACH ITEM USING oldList(x) ] });
    });
};

The list param is named items. The param x.done indicate if the item will be deleted.

Another references: Another example

Hope help you. Greetings.

For the the accepted answer of @Joseph Silber is not working, because indexOf returns -1. This is probably because Angular adds an hashkey, which is different for my $scope.items[0] and my item. I tried to resolve this with the angular.toJson() function, but it did not work :(

Ah, I found out the reason... I use a chunk method to create two columns in my table by watching my $scope.items. Sorry!

Angular have a built-in function called arrayRemove, in your case the method can simply be:

arrayRemove($scope.persons, person)