With the help of Angularjs, We can dynamically add or remove list items in an array. It is shown In the example given below.

Addition of the list items is done using 'push' method and removal of the item is done using “splice” method. Controller-
<div ng-app="myApp">
<ul ng-controller="ItemsController" class="nav">
<input type="text" value="ItemName" ng-model="newItemName"
placeholder="name of new item...">
<button ng-click="addItem()">Add Me</button>
<li ng-repeat="item in items.data" id="item{{item.id}}">
<a href="#">{{item.title}}</a> <a ng-click="deleteItem($index)" class="delete-item">x</a>
</li>
</ul>
</div>
'push' Method-
$scope.addItem = function (index) {
items.data.push({
id: $scope.items.data.length + 1,
title: $scope.newItemName
});
}
“splice” Mehod-
$scope.deleteItem = function (index) {
items.data.splice(index, 1);
}
0 Comment(s)