AngularJS: Adding and Removing Items in an Array

The goal of this is to create a simple way to add and remove items from a list in Angular. You can see the finished demo on plnkr. Here is the user interaction:

To start off, I have a new controller in my Angular app for this demo. It’s called demoController.

app.controller('demoController', function($scope) {
// initial items

// add an item

// remove an item
});

Then in my html, I have this new controller with some scaffolding of what I want the ui to look like.

<div ng-controller="demoController">
<!-- list of items with a button to remove that item -->
<ul>
<li ng-repeat="item in items">
<button ng-click="remove($index)">Remove</button>
</li>
</ul>

<!-- input and button it add a new item -->
<div>
<input type="text" ng-model="input">
<button type="submit" ng-click="add()">Add</button>
</div>
</div>

So back to the javascript. First some initial data to supply:

app.controller('demoController', function($scope) {
// initial items
$scope.items = [
'item one',
'item two',
'item three'
];
});

Then a way to add a new item by getting the text in the input and pushing that to the items scope:

app.controller('demoController', function($scope) {
// initial items
$scope.items = [
'item one',
'item two',
'item three'
];

// add an item
$scope.add = function() {
$scope.items.push($scope.input);
};
});

Lastly, removing an item from items. Angular provides an $index that we can use to remove a specific item:

app.controller('demoController', function($scope) {
// initial items
$scope.items = [
'item one',
'item two',
'item three'
];

// add an item
$scope.add = function() {
$scope.items.push($scope.input);
};

// remove an item
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
});

That’s a simple way to add and remove items. See the demo on plnkr.

Extra

Right now when you add a new item to the list, the input keeps the input that was added. Not a good ui. To remove the input when it is submitted, simply make the input scope emtpy with $scope.input = ''; in $scope.add:

$scope.add = function() {
$scope.items.push($scope.input);
$scope.input = '';
};