How to remove elements/nodes from angular.js array
There is no rocket science in deleting items from array. To delete items from any array you need to use splice: $scope.items.splice(index, 1);. Here is an example:
HTML
<!DOCTYPE html><html data-ng-app="demo"> <head> <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div data-ng-controller="DemoController"> <ul> <li data-ng-repeat="item in items"> {{item}} <button data-ng-click="removeItem($index)">Remove</button> </li> </ul> <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button> </div> </body></html>JavaScript
"use strict";var demo = angular.module("demo", []);function DemoController($scope){ $scope.items = [ "potatoes", "tomatoes", "flour", "sugar", "salt" ]; $scope.addItem = function(item){ $scope.items.push(item); $scope.newItem = null; } $scope.removeItem = function(index){ $scope.items.splice(index, 1); }}
For anyone returning to this question. The correct "Angular Way" to remove items from an array is with $filter. Just inject $filter into your controller and do the following:
$scope.items = $filter('filter')($scope.items, {name: '!ted'})You don't need to load any additional libraries or resort to Javascript primitives.
You can use plain javascript - Array.prototype.filter()
$scope.items = $scope.items.filter(function(item) { return item.name !== 'ted';});