AngularJS Filters

Filters are used in AngularJS to change, modify or format the data. These can be clubbed in directives or even in expressions using the pipe character. The commonly used filters in AngularJS applications to transform data are

Filter Description
Json It is used to format a given object into a JSON string.
Limit As the name suggests, it is used to limit an array/string into a specified number of elements/characters.
Lowercase It converts a text completely into lowercase text.
Number It formats a number to a string.
Orderby It is used to order an array based on some provided criteria.
Uppercase It converts a text completely to uppercase text.
Currency It formats any text in a currency format.
Filter Based on a provided criterion, it filters an array to a subset.
Date It is used to format a given date into a specified format.

How do we add filters to expressions and directives?

Filters are added to expressions using the pipe (|) character, which is then followed by the required filter. Similarly, for directives like ng-repeat, filters can be added by using the pipe character followed by the required filter.

Now, let us have an elaborate look at the commonly used filters one by one.

uppercase filter

This filter can be added by using the pipe character. In this example, we have added the uppercase filter so that we obtain the student's name in all capital letters.

													
 Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

lowercase filter

This filter can be added by using the pipe character. In this example, we have added the lowercase filter so that we obtain the student's name in all lowercase letters.

							
 Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}

currency filter

When currency filter is added to an expression using pipe character, we get any text returned in currency format. In this example we have added currency filter to print fees using currency format.

							
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}	

filter filter

This filter is used only a specified number of things have to be obtained as output. In this example, inorder to display only required subjects, we've used subjectName as filter.


orderBy filter

This filter is used to order an array. Thus we have used this filter to order th subjects based on the marks.


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 here example-

					
 <!DOCTYPE html>
 <html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <div ng-app="myApp" ng-controller="namesCtrl">
 <p>Type a letter in the input field:</p>
 <p><input type="text" ng-model="test"></p>
 <ul>
   <li ng-repeat="x in names | filter:test">
    {{ x }}
  </li>
</ul>
</div>
 <script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Mithilesh',
'Mukesh',
'Rahul',
'Harish',
'Alexa',
'Google',
'Twitter',
'Joson',
'Aliya'
   ];
});
</script>
 <p>The list will only contain the names matching the filter</p>
</body>
</html>

AngularJS Custom Filters

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

See here example:

<!DOCTYPE html>
 <html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <p>Click the table headers to change the sorting order:</p>
 <div ng-app="myApp" ng-controller="namesCtrl">
 <table border="1" width="100%">
 <tr>
 <th ng-click="orderByMe('name')">Name</th>
 <th ng-click="orderByMe('country')">Country</th>
</tr>
 <tr ng-repeat="x in names | orderBy:myOrderBy">
 <td>{{x.name}}</td>
 <td>{{x.country}}</td>
</tr>
</table>
</div>
 <script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
       $scope.names = [
        {name:'Mukesh',country:'India'},
        {name:'Rahul',country:'USA'},
        {name:'Harish',country:'India'},
        {name:'Alexa',country:'India'},
        {name:'Aliya',country:'Pakistan'},
        {name:'Joson',country:'India'},
        {name:'Osama',country:'Iraq'},
        {name:'Google',country:'UK'},
        {name:'Twitter',country:'Russia'}
        ];

    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
});
</script>
</body>
< /html>