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:

 <!DOCTYPE html>
<html>
<script src="../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Sonoo",
    $scope.lastName = "Jaiswal"
});
</script>
</body>

<!-- Mirrored from www.javatpoint.com/angularjs-filters by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 08:24:26 GMT -->
</html>

Test it Now

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

See this example:

   <!DOCTYPE html>
<html>
<script src="../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Sonoo",
    $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>

Test it Now

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:

 <!DOCTYPE html>
<html>
<script src="../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>	
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Ramesh',country:'India'},
        {name:'Alex',country:'USA'},
        {name:'Pooja',country:'India'},
        {name:'Mahesh',country:'India'},
        {name:'Iqbal',country:'Pakistan'},
        {name:'Ramanujam',country:'India'},
        {name:'Osama',country:'Iraq'},
        {name:'Johnson',country:'UK'},
        {name:'Karl',country:'Russia'}
        ];
});
</script>
</body>
</html>

Test it Now

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:

<!DOCTYPE html>
<html>
<script src="../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'o'">
    {{ x }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
'Ramesh',
'Pooja',
'Mahesh',
'Ramanujam',
'Osama',
'Iqbal',
'Karl',
'Johnson',
'Alex'
    ];
});
</script>
<p>This example displays only the names containing the letter "o".</p>
</body>
</html>

Test it Now

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:

<!DOCTYPE html>
<html>
<script src="../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 = [
        'Ramesh',
'Pooja',
'Mahesh',
'Ramanujam',
'Osama',
'Iqbal',
'Karl',
'Johnson',
'Alex'
   ];
});
</script>
<p>The list will only contain the names matching the filter.</p>
</body>
</html>

Test it Now

Sort an array based on user input

You can sort an array according to the table columns.

See this example:

<!DOCTYPE html>
<html>
<script src="../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:'Ramesh',country:'India'},
        {name:'Alex',country:'USA'},
        {name:'Pooja',country:'India'},
        {name:'Mahesh',country:'India'},
        {name:'Iqbal',country:'Pakistan'},
        {name:'Ramanujam',country:'India'},
        {name:'Osama',country:'Iraq'},
        {name:'Johnson',country:'UK'},
        {name:'Karl',country:'Russia'}
        ];

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

Test it Now

AngularJS Custom Filters

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

See this example:

<!DOCTYPE html> <html> <script src="../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:'Ramesh',country:'India'}, {name:'Alex',country:'USA'}, {name:'Pooja',country:'India'}, {name:'Mahesh',country:'India'}, {name:'Iqbal',country:'Pakistan'}, {name:'Ramanujam',country:'India'}, {name:'Osama',country:'Iraq'}, {name:'Johnson',country:'UK'}, {name:'Karl',country:'Russia'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); </script> </body> </html>
Test it Now
Next TopicAngularJS Tables

← prev next →

AngularJS Tutorial

Interview Questions

AngularJS Filters

How to add filters to expressions

How to add filters to directives

The filter Filter

Filter an array based on user input

Sort an array based on user input

AngularJS Custom Filters