Simple to-do list, but with a delete button on list page for each item:
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>
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)
and $scope.persons.remove(person)
.
Although the database 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?
This question is related to
javascript
html
angularjs
array.splice(array.pop(item));
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.
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 );
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!
To remove a element from scope use:
// remove an item
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
You can also use this
$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });
Angular have a built-in function called arrayRemove
, in your case the method can simply be:
arrayRemove($scope.persons, person)
$scope.removeItem = function() {
$scope.items.splice($scope.toRemove, 1);
$scope.toRemove = null;
};
this works for me!
I would use the Underscore.js library that has a list of useful functions.
without
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]
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 JSFiddle.
filter
var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // => [2, 4, 6]
$scope.newNodes = _.filter($scope.nodes, function(node) {
return !(node.name == res);
});
See Demo in Fiddle.
Source: Stackoverflow.com