Post
Ask Question

Filtering Data in AngularJS

In this article I am explaining how to filter data in AngularJS and how to use ng-model and ng-click directives. First of all let's understand a little bit about the ng-model and ng-click directives.

ng-model

This works the same as ng-bind but it allows two-way data binding between the view and scope. ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) for example <input ng-model="val"/>.

ng-model will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

Example

  1. <body ng-init="friends = [{name:'Ravi'},{name:'Vikash'},{name:'Anil'},{name: 'Animesh'}]">  
  2.         <h1>ng-model example</h1>  
  3.         <p>names: {{friends}}</p>  
  4.         <h3>Binding to each element directly:</h3>  
  5.         <div ng-repeat="friend in friends">  
  6.             Value: {{friend.name}}  
  7.             <input ng-model="friend.name">  
  8.         </div>  
  9.     </body> 

ng-click

ng-click binds the click event on the button or link or any clickable element with the function that is defined within $scope.

  1. <a href=" ng-click="removeUser(element)">Delete</a>  
  2. var myModule = angular.module('myModule', []);  
  3. myModule.controller('myController', ['$scope', function ($scope) {  
  4.     $scope.users =  
  5.         [  
  6.           { Name: 'Raj Kumar', Designation: 'Project Manager', Location: 'Noida India' },  
  7.           { Name: 'John Smith', Designation: 'Database Administrator', Location: 'Florida USA' },  
  8.           { Name: 'Monika Malhotra', Designation: 'Search Engine', Location: 'Banglora India' },  
  9.           { Name: 'Versha Pandey', Designation: 'Senior Software Engineer', Location: 'Mumbai India' },  
  10.           { Name: 'Steve ', Designation: 'Project Manager', Location: 'Brisbane Australia' },  
  11.           { Name: 'Pooja Sharma', Designation: 'Tester', Location: 'Delhi India' },  
  12.           { Name: 'Reena Tyagi', Designation: 'Fresher', Location: 'Delhi India' }   
  13.         ];  
  14.     $scope.removeUser = function (userToRemove) {  
  15.         var index = this.users.indexOf(userToRemove);  
  16.         this.users.splice(index, 1);  
  17.     };     
  18. }]); 

Getting Started

  • Start Visual Studio
  • Create a new website
  • Provide the name and location of website
  • Click "Next"

Let's add a simple controller first.

This is my controller.

  1. var myModule = angular.module('myModule', []);  
  2. myModule.controller('myController', ['$scope', function ($scope) {  
  3.     $scope.users =  
  4.         [  
  5.           { Name: 'Raj Kumar', Designation: 'Project Manager', Location: 'Noida India' },  
  6.           { Name: 'John Smith', Designation: 'Database Administrator', Location: 'Florida USA' },  
  7.           { Name: 'Monika Malhotra', Designation: 'Search Engine', Location: 'Banglora India' },  
  8.           { Name: 'Versha Pandey', Designation: 'Senior Software Engineer', Location: 'Mumbai India' },  
  9.           { Name: 'Steve ', Designation: 'Project Manager', Location: 'Brisbane Australia' },  
  10.           { Name: 'Pooja Sharma', Designation: 'Tester', Location: 'Delhi India' },  
  11.           { Name: 'Reena Tyagi', Designation: 'Fresher', Location: 'Delhi India' }  
  12.   
  13.         ];  
  14.     $scope.addUsers = function () {  
  15.         $scope.users.push({ Name: $scope.inputData.Name, Designation: $scope.inputData.Designation, Location: $scope.inputData.Location });  
  16.     };  
  17.     $scope.removeUser = function (userToRemove) {  
  18.         var index = this.users.indexOf(userToRemove);  
  19.         this.users.splice(index, 1);  
  20.     };  
  21.   
  22.     $scope.clearUser = function (user) {  
  23.         user.Name = '';  
  24.         user.Designation = '';  
  25.         user.Location = '';  
  26.     };  
  27.   
  28.     $scope.clearInput = function () {  
  29.         $scope.inputData.Name = '';  
  30.         $scope.inputData.Designation = '';  
  31.         $scope.inputData.Location = '';  
  32.     };  
  33.   
  34.     $scope.editUser = function (id) {   
  35.         for (i in $scope.users) {  
  36.             if ($scope.users[i].id == id) {                 
  37.                 $scope.newUser = angular.copy($scope.users[i]);  
  38.             }  
  39.         }  
  40.     }  
  41. }]); 

As you can see in my controller I have a few functions for add, delete, edit and reset. Now let's work on the view part.

  1. <body>  
  2.     <div class="scope" data-ng-app="myModule" data-ng-controller="myController">  
  3.         <h3>AngularJS Filter data sample </h3>  
  4.         <br />  
  5.         Name:<br />  
  6.         <input type="text" data-ng-model="inputData.Name" placeholder="name" />  
  7.         <br />  
  8.         Designation:<br />  
  9.         <input type="text" data-ng-model="inputData.Designation" placeholder="designation" />  
  10.         <br />  
  11.         Location:<br />  
  12.         <input type="text" data-ng-model="inputData.Location" placeholder="location" />  
  13.         <br />  
  14.         <br />  
  15.         <button class="btn btn-primary" data-ng-click="addUsers()">Add User</button> <button class="btn btn-primary" data-ng-click="clearInput()">Reset</button>  
  16.         <br />  
  17.         <br />  
  18.         <strong> Filter by Name:</strong>  
  19.         <input type="text" data-ng-model="nameText" placeholder="Type name here" />  
  20.         <br />  
  21.         <ul>  
  22.             <li class="li" data-ng-repeat="element in users | filter:nameText | orderBy:'Name'">  
  23.                 <strong> [{{$index + 1}}] {{ element.Name | uppercase}} working as {{ element.Designation }} in {{ element.Location }} </strong>  
  24.                 [ <a href="#" ng-click="clearUser(element)">clear</a>  
  25.                 | <a href="#" ng-click="removeUser(element)">X</a>  
  26.                 | <a href="#" ng-click="editUser(1)">edit</a>  
  27.                 ]  
  28.             </li>  
  29.         </ul>  
  30.     </div>  
  31.     <script src="Scripts/angular.min.js"></script>  
  32.     <script src="Scripts/App.js"></script>  
  33.     <link href="styles/App.css" rel="stylesheet" />  
  34.     </body>     
  35. </html> 

Let's run the application to see the output:

run the application

Filter By Name
Angular.js

Click the add button to add a new user to the existing list.

new user in existing list

As you can see a new record has been added. Now let's test the filter by name because we are filtering by name.

  1. <strong> [{{$index + 1}}] {{ element.Name | uppercase}} working as {{ element.Designation }} in {{ element.Location }} </strong> 

name

  1. <ul>  
  2.    <li class="li" data-ng-repeat="element in users | filter:nameText | orderBy:'Name'">                     <strong> [{{$index + 1}}] {{ element.Name | uppercase}} working as {{ element.Designation }} in {{ element.Location }} </strong>  
  3.          [ <a href="#" ng-click="clearUser(element)">clear</a>  
  4.          | <a href="#" ng-click="removeUser(element)">X</a>  
  5.          | <a href="#" ng-click="editUser(1)">edit</a>  
  6.    </li> 
    </ul> 

Output
In my sample when click on edit I am passing id 1 because we don't have id in my list, we have created an index dynamically for display only.


Similar Articles