All for Joomla All for Webmasters

AngularJS Filters

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.     $scope.orderByMe = function(x) {
  32.         $scope.myOrderBy = x;
  33.     }
  34. });
  35. </script>
  36. </body>
  37. </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.     $scope.orderByMe = function(x) {
  32.         $scope.myOrderBy = x;
  33.     }
  34. });
  35. </script>
  36. </body>
  37. </html>

 

PinIt
submit to reddit

Leave a Reply

Top