How to add and remove entries in collection data Suppose we have a collection of data (array, list etc), which we are rendering into view using AngularJS framework. We want to add data into the collection as well as remove from it using Angular view. We can do it easily using some data binding operation. Let’s look at the following code block. It simply renders entries of an array. HTML: <html ng-app="itemApp"> <head> <meta charset="utf-8"> <title>AngularJS Show Items</title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script> var nameApp = angular.module('itemApp', []); nameApp.controller('ItemCtrl', function ($scope){ $scope.items = ['Beef', 'Chicken', 'Mutton']; }); </script> </head> <body ng-controller="ItemCtrl"> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> </body> </html> Output: Code: Beef Chicken Mutton We have seen this type of example in our previous article. We will now include some more operations into this code block. Add data into collection and display in view: Let’s add a form where we will enter an item name, click a submit button and the item name will be added into the collection, and will be rendered into view. First, we are going to use a form, with a textfield and a submit button. When a value will be entered in the text field, and button will be clicked, a function will be called to process further operation. HTML: <form ng-submit="addItem()"> <input type="text" ng-model="itemName"> <input type="submit" value="Add"> </form> The function named addItem() is fired when submit button is clicked. So, we have to define addItem() function now. Code: $scope.addItem = function() { $scope.items.push($scope.itemName); $scope.itemName = ''; }; This function performs following tasks: Add the entered item name into the item array using push operation. Clears the value from the text field. As, we have been already rendering data from the array named items into the view using data binding, the entered item will be shown in the view as soon as we click the submit button. Here is the full code block of the operation stated above: HTML: <html ng-app="itemApp"> <head> <meta charset="utf-8"> <title> AngularJS Add Items </title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script> var itemApp = angular.module('itemApp', []); itemApp.controller('ItemCtrl', function ($scope){ $scope.items = ['Beef', 'Chicken', 'Mutton']; $scope.addItem = function() { $scope.items.push($scope.itemName); $scope.itemName = ''; }; }); </script> </head> <body ng-controller="ItemCtrl"> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> <form ng-submit="addItem()"> <input type="text" ng-model="itemName"> <input type="submit" value="Add"> </form> </body> </html> Now, we are able to add any item in our collection with this code block. Remove data from view: We have included an option to add data into our collection. Now consider that we need another option which will let us remove item from the collection as well. For this operation, we will associate every item with a button in the view, which will let us remove the item, the item we want to remove. Code: <li ng-repeat="item in items">{{item}} <a href="" ng-click="removeItem(item)">remove</a></li> There is a remove link with every item now. When the link is clicked, removeItem (item) function will be called. Now concentrate on the removeItem(item) function. Code: $scope.removeItem = function(item) { var i = $scope.items.indexOf(item); $scope.items.splice(i, 1); }; This function performs following operations: Receives item name as parameter. Finds out position (index) of that item in the items array. Removes the item from the array using splice method. Prototype of splice method here : array.splice(index of removable item, number of items to remove from that index) So, in our case, splice method is removing one item, and the index of that item is found from indexOf method. Now, we are going to integrate the necessary code to remove item with our existing code. HTML: <html ng-app="itemApp"> <head> <meta charset="utf-8"> <title> AngularJS Add and Remove Items </title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script> var itemApp = angular.module('itemApp', []); itemApp.controller('ItemCtrl', function ($scope){ $scope.items = ['Beef', 'Chicken', 'Mutton']; $scope.addItem = function() { $scope.items.push($scope.itemName); $scope.itemName = ''; }; $scope.removeItem = function(item) { var i = $scope.items.indexOf(item); $scope.items.splice(i, 1); }; }); </script> </head> <body ng-controller="ItemCtrl"> <ul> <li ng-repeat="item in items">{{item}} <a href="" ng-click="removeItem(item)">remove</a></li> </li> </ul> <form ng-submit="addItem()"> <input type="text" ng-model="itemName"> <input type="submit" value="Add"> </form> </body> </html> Now, we are able to add and remove item in our collection with this code block. Filter item(s) from collection: Sometimes we deal with lots of data, and need to filter our desired data from a very large list. AngularJS provides an easy way to search and filter data with specified keywords. Let’s create a text field above the list of items in our application. HTML: Search <input type = "text" ng-model = "query"> Then use a filter:query option in the view. Code: ng-repeat="item in items | filter:query">{{item}} It allows us to: Type keyword to search item. Display only the items containing with the keyword we provide. Here is the full code block: HTML: <html ng-app="itemApp"> <head> <meta charset="utf-8"> <title> AngularJS Filter Items </title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script> var itemApp = angular.module('itemApp', []); itemApp.controller('ItemCtrl', function ($scope){ $scope.items = ['Beef', 'Chicken', 'Mutton']; $scope.addItem = function() { $scope.items.push($scope.itemName); $scope.itemName = ''; }; $scope.removeItem = function(item) { var i = $scope.items.indexOf(item); $scope.items.splice(i, 1); }; }); </script> </head> <body ng-controller="ItemCtrl"> Search <input type = "text" ng-model = "query"> <ul> <li ng-repeat="item in items | filter:query">{{item}} <a href="" ng-click="removeItem(item)">remove</a></li> </li> </ul> <form ng-submit="addItem()"> <input type="text" ng-model="itemName"> <input type="submit" value="Add"> </form> </body> </html> Now, we are able to add, remove and search item in our collection with this code block. Separating controller from main file: Up to now, we were writing our controller script and HTML markup in the same file. But we should keep them apart, in different file to obtain modularization. Now we are going to achieve this with our existing code that we have learnt from this tutorial. For that purpose, follow the command stated below: Create a folder named js in the location where our index file is located. Then create another folder named controller inside js folder. Create file named itemController.js inside controller folder. Remove the controller code from index.html Move the controller code to itemController.js file Use reference of itemController .js from index.html <script src="js/controller/itemController.js"> </script> Finally, the content of index file is: HTML: <html ng-app="itemApp"> <head> <meta charset="utf-8"> <title> AngularJS Example </title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script src="js/controller/itemController.js"> </script> </head> <body ng-controller="ItemCtrl"> Search <input type = "text" ng-model = "query"> <ul> <li ng-repeat="item in items | filter:query">{{item}} <a href="" ng-click="removeItem(item)">remove</a></li> </li> </ul> <form ng-submit="addItem()"> <input type="text" ng-model="itemName"> <input type="submit" value="Add"> </form> </body> </html> Content of itemController.js is: Code: var itemApp = angular.module('itemApp', []); itemApp.controller('ItemCtrl', function ($scope){ $scope.items = ['Beef', 'Chicken', 'Mutton']; $scope.addItem = function() { $scope.items.push($scope.itemName); $scope.itemName = ''; }; $scope.removeItem = function(item) { var i = $scope.items.indexOf(item); $scope.items.splice(i, 1); }; }); We learned some basic operation in AngularJS.
