AngularJS Filters

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

In AngularJS, filters are used to format data. Following is a list of filters used for transforming data.

Filter Description
Currency It formats a number to a currency format.
Date It formats a date to a specified format.
Filter It select a subset of items from an array.
Json It formats an object to a Json string.
Limit It is used to limit an array/string, into a specified number of elements/characters.
Lowercase It formats a string to lower case.
Number It formats a number to a string.
Orderby It orders an array by an expression.
Uppercase It formats a string to upper case.

How to add filters to expressions

You can add filters to expressions by using the pipe character |, followed by a filter.

In this example, the uppercase filter format strings to upper case:

See this example:

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="personCtrl">  
  6. <p>The name is {{ firstName | uppercase }}</p>  
  7. </div>  
  8. <script>  
  9. angular.module('myApp', []).controller('personCtrl', function($scope) {  
  10.     $scope.firstName = "Sonoo",  
  11.     $scope.lastName = "Jaiswal"  
  12. });  
  13. </script>  
  14. </body>  
  15. </html>  

Let's apply the lowercase filter into the same example:

See this example:

  1.    <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="personCtrl">  
  6. <p>The name is {{ firstName | lowercase }}</p>  
  7. </div>  
  8. <script>  
  9. angular.module('myApp', []).controller('personCtrl', function($scope) {  
  10.     $scope.firstName = "Sonoo",  
  11.     $scope.lastName = "Jaiswal"  
  12. });  
  13. </script>  
  14. </body>  
  15. </html>  

How to add filters to directives

Filters can be added to directives, like ng-repeat, by using the pipe character |, followed by a filter.

Let's take an example:

In this example, orderBy filter is used to sort an array.

See this example:

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>      
  5. <div ng-app="myApp" ng-controller="namesCtrl">  
  6. <p>Looping with objects:</p>  
  7. <ul>  
  8.   <li ng-repeat="x in names | orderBy:'country'">  
  9.     {{ x.name + ', ' + x.country }}  
  10.   </li>  
  11. </ul>  
  12. </div>  
  13. <script>  
  14. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  15.     $scope.names = [  
  16.         {name:'Ramesh',country:'India'},  
  17.         {name:'Alex',country:'USA'},  
  18.         {name:'Pooja',country:'India'},  
  19.         {name:'Mahesh',country:'India'},  
  20.         {name:'Iqbal',country:'Pakistan'},  
  21.         {name:'Ramanujam',country:'India'},  
  22.         {name:'Osama',country:'Iraq'},  
  23.         {name:'Johnson',country:'UK'},  
  24.         {name:'Karl',country:'Russia'}  
  25.         ];  
  26. });  
  27. </script>  
  28. </body>  
  29. </html>  

The filter Filter

The filter Filter can only be used on arrays because it selects a subset of an array. It returns an array containing only the matching items.

Let's take an example:

This example will return the names that contain the letter "o".

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="namesCtrl">  
  6. <ul>  
  7.   <li ng-repeat="x in names | filter : 'o'">  
  8.     {{ x }}  
  9.   </li>  
  10. </ul>  
  11. </div>  
  12. <script>  
  13. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  14.     $scope.names = [  
  15. 'Ramesh',  
  16. 'Pooja',  
  17. 'Mahesh',  
  18. 'Ramanujam',  
  19. 'Osama',  
  20. 'Iqbal',  
  21. 'Karl',  
  22. 'Johnson',  
  23. 'Alex'  
  24.     ];  
  25. });  
  26. </script>  
  27. <p>This example displays only the names containing the letter "o".</p>  
  28. </body>  
  29. </html>  

Filter an array based on user input

You can use the value of the input field as an expression in a filter by setting the ng-model directive on an input field.

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="namesCtrl">  
  6. <p>Type a letter in the input field:</p>  
  7. <p><input type="text" ng-model="test"></p>  
  8. <ul>  
  9.   <li ng-repeat="x in names | filter:test">  
  10.     {{ x }}  
  11.   </li>  
  12. </ul>  
  13. </div>  
  14. <script>  
  15. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  16.     $scope.names = [  
  17.         'Ramesh',  
  18. 'Pooja',  
  19. 'Mahesh',  
  20. 'Ramanujam',  
  21. 'Osama',  
  22. 'Iqbal',  
  23. 'Karl',  
  24. 'Johnson',  
  25. 'Alex'  
  26.    ];  
  27. });  
  28. </script>  
  29. <p>The list will only contain the names matching the filter.</p>  
  30. </body>  
  31. </html>  

Sort an array based on user input

You can sort an array according to the table columns.

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <p>Click the table headers to change the sorting order:</p>  
  6. <div ng-app="myApp" ng-controller="namesCtrl">  
  7. <table border="1" width="100%">  
  8. <tr>  
  9. <th ng-click="orderByMe('name')">Name</th>  
  10. <th ng-click="orderByMe('country')">Country</th>  
  11. </tr>  
  12. <tr ng-repeat="x in names | orderBy:myOrderBy">  
  13. <td>{{x.name}}</td>  
  14. <td>{{x.country}}</td>  
  15. </tr>  
  16. </table>  
  17. </div>  
  18. <script>  
  19. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  20.        $scope.names = [  
  21.         {name:'Ramesh',country:'India'},  
  22.         {name:'Alex',country:'USA'},  
  23.         {name:'Pooja',country:'India'},  
  24.         {name:'Mahesh',country:'India'},  
  25.         {name:'Iqbal',country:'Pakistan'},  
  26.         {name:'Ramanujam',country:'India'},  
  27.         {name:'Osama',country:'Iraq'},  
  28.         {name:'Johnson',country:'UK'},  
  29.         {name:'Karl',country:'Russia'}  
  30.         ];  
  31.   
  32.     $scope.orderByMe = function(x) {  
  33.         $scope.myOrderBy = x;  
  34.     }  
  35. });  
  36. </script>  
  37. </body>  
  38. </html>  

AngularJS Custom Filters

You can create your own filters by register a new filter factory function with your module.

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <p>Click the table headers to change the sorting order:</p>  
  6. <div ng-app="myApp" ng-controller="namesCtrl">  
  7. <table border="1" width="100%">  
  8. <tr>  
  9. <th ng-click="orderByMe('name')">Name</th>  
  10. <th ng-click="orderByMe('country')">Country</th>  
  11. </tr>  
  12. <tr ng-repeat="x in names | orderBy:myOrderBy">  
  13. <td>{{x.name}}</td>  
  14. <td>{{x.country}}</td>  
  15. </tr>  
  16. </table>  
  17. </div>  
  18. <script>  
  19. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  20.        $scope.names = [  
  21.         {name:'Ramesh',country:'India'},  
  22.         {name:'Alex',country:'USA'},  
  23.         {name:'Pooja',country:'India'},  
  24.         {name:'Mahesh',country:'India'},  
  25.         {name:'Iqbal',country:'Pakistan'},  
  26.         {name:'Ramanujam',country:'India'},  
  27.         {name:'Osama',country:'Iraq'},  
  28.         {name:'Johnson',country:'UK'},  
  29.         {name:'Karl',country:'Russia'}  
  30.         ];  
  31.   
  32.     $scope.orderByMe = function(x) {  
  33.         $scope.myOrderBy = x;  
  34.     }  
  35. });  
  36. </script>  
  37. </body>  
  38. </html>