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 = '';
};