Google News
logo
AngularJS Filters
The AngularJS filters are used to format data. Filters can be used with an expression or directives using pipe | sign. 

{{expression | filterName:parameter }}

 AngularJS includes various filters to format data of different data types. The following table lists important filters.
Filter Description
Uppercase converts a text to upper case.
Lowercase converts a text to lower case.
Number Format a number to a string.
Currency Format a number to a currency format.
Date Format a date to a specified format.
Filter Filters an array based on specified criteria and returns new array.
orderBy orders the array based on provided criteria.
Json Format an object to a JSON string.
limitTo Limits an array/string, into a specified number of elements/characters.
Uppercase & Lowercase Filters
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Uppercase and Lowercase Filters</title>
       <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body ng-app >

    <div ng-init="person.first_name='Free Time ';person.last_name='Learning'">
        <b>Lower case :</b> {{person.first_name + ' ' + person.last_name | lowercase}} <br /><br />
        <b>Upper case :</b> {{person.first_name + ' ' + person.last_name | uppercase}} 
    </div>

</body>
</html>
Output :
Number Filter

A number filter formats numeric data as text with comma and specified fraction size.

{{ number_expression | number:fractionSize}}

If a specified expression does not return a valid number then number filter displays an empty string.

<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Number Filter</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body ng-app >
 
    Enter Amount: <input type="number" ng-model="amount" /> <br />
 
    18000 | number = {{18000 | number}} <br />
    amount | number = {{amount | number}} <br />
    amount | number:2 = {{amount | number:2}} <br />
    amount | number:4 = {{amount | number:4}} <br />
    amount | number = <span ng-bind="amount | number"></span>
</body>
</html>
Output :
Currency Filter
The currency filter formats a number as currency:
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS currency Filter</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body>
 
    <div ng-app="myApp">
        <div ng-controller="myController">
            <strong>Default currency :</strong> {{person.salary | currency}} <br />
            <strong>Custom currency :</strong> {{person.salary | currency:'Rs.'}} <br />
            <strong>No Fraction :</strong> {{person.salary | currency:'Rs.':0}} <br />
            <strong>Fraction 2 :</strong> <span ng-bind="person.salary| currency:'GBP':2"></span>
        </div>
<script type="text/javascript">
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
            $scope.person = { firstName: 'Ramana', lastName: 'Reddy', salary: 180000}
        });
    </script>
</div>
 
</body>
</html>
Output :
Date Filter
Format a date to a specified format.
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Date Filter</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body ng-app >
 
    <div ng-init="person.DOB = 715234238898">
    
        <b>Default date :</b> {{person.DOB| date}} <br />
        <b>Short date :</b> {{person.DOB| date:'short'}} <br />
        <b>Long date :</b> {{person.DOB | date:'longDate'}} <br />
        <b>Year :</b> {{person.DOB | date:'yyyy'}} <br />
        
    </div>
    
</body>
</html>
Output :
AngularJS Filter
Filter selects items from an array based on the specified criteria and returns a new array.
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Filter</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body ng-app="myApp" >
    <div ng-controller="myController">
        <b>Enter Name to search :</b> <input type="text" ng-model="searchCriteria" /> <br /><br />
        <b>Result :</b> {{myArr | filter:searchCriteria}} 
    </div>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
            $scope.myArr = ['Ramana', 'Srinu', 'suman', 'marry', 'Thanu', 'jaanu']
        });
    </script>
</body>
</html>
Output :
Adding Filters to Directives
Filters are added to directives, like ng-repeat, by using the pipe character |, followed by a filter :

The orderBy filter sorts an array:

<!DOCTYPE html>  
<html> 
<head>
<title>orderBy Filters</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<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 type="text/javascript">
 
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Ramana',country:'India'},
        {name:'Raja',country:'India'},
        {name:'Mike',country:'USA'},
        {name:'jhon',country:'England'},
        {name:'Devid',country:'Russia'},
        {name:'Roja',country:'India'},
        {name:'Venkat',country:'India'},
        {name:'Iqbal',country:'Pakistan'},
{name:'Karl',country:'Russia'}  
        ];
});
 
</script>
 
</body>
</html>
Output :
Sort an array based on user input Filter
You can sort an array according to the table columns.
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Array Filter</title>
    <script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body>
 
    <div ng-app="myApp" ng-controller="Array_filter">  
        <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 type="text/javascript">  
        angular.module('myApp', []).controller('Array_filter', function($scope) {  
        $scope.names = [  
        {name:'Ramana',country:'India'},
        {name:'Raja',country:'India'},
        {name:'Mike',country:'USA'},
        {name:'jhon',country:'England'},
        {name:'Devid',country:'Russia'},
        {name:'Roja',country:'India'},
        {name:'Venkat',country:'India'},
        {name:'Iqbal',country:'Pakistan'},
        {name:'Karl',country:'Russia'}
        ];  
        
        $scope.orderByMe = function(x) {  
        $scope.myOrderBy = x;  
        }  
        });  
    </script>  
</body>  
</html>  
Output :