AngularJS Filters

AngularJS filters are used to format the value of model variable to  currency,date, numbers etc. AngularJS provides below filters to format the data.

SNO Filter Name Description Filter Syntax
1 uppercase Formats String to uppercase {{ upper_model_var | uppercase }}
2 lowercase Formats String to lowercase {{ lowercae_var | lowercase}}
3 number Formats given number to Text with given fraction {{ number_variable | number : fractionSize}}
4 orderBy Returns ordered array collection with given comparator. It returns ascending order by default {{ json_array | orderBy : expression : reverse : comparator}}
5 limitTo extracts elements in given array or string with specified size and beginning {{ array | limitTo : limit : begin}}
6 json Format JSON object to String {{ jsonObject | json : spacing}}
7 filter searches for given string in the array and returns resulting array on to UI {{ array | filter : expression : comparator : anyPropertyKey}}
8 date format input date to given format {{ date_var | date : format : timezone}}
9 currency format input number to currency {{ modelName | currency : symbol : fractionSize }}

 

Filters Sample Code Snippets

 

Filter Name Filter Code Result
Currency
{{cost | currency:'USD$':0}}

Input:Enter Cost:

Result: $2,333.79
USD$2,333.79
USD$2,334
Date {{ today | date : ‘yyyy-MM-dd’}}
Input:”2017-03-08T11:14:40.456Z”
1. 03/08/2017
2. 2017-03-08
3. Mar 8, 2017 4:44:40 PM
JSON
{{ employees | json : 5}}

JSON Object: [{“empName”:”vijay”,”sex”:”M”,”salary”:10000},{“empName”:”Aruna”,”sex”:”F”,”salary”:25000},{“empName”:”Jayaram”,”sex”:”M”,”salary”:23000},{“empName”:”John”,”sex”:”M”,”salary”:980000},{“empName”:”Rashmi”,”sex”:”F”,”salary”:12233}]

JSON String:[ { “empName”: “vijay”, “sex”: “M”, “salary”: 10000 }, { “empName”: “Aruna”, “sex”: “F”, “salary”: 25000 }, { “empName”: “Jayaram”, “sex”: “M”, “salary”: 23000 }, { “empName”: “John”, “sex”: “M”, “salary”: 980000 }, { “empName”: “Rashmi”, “sex”: “F”, “salary”: 12233 } ]
lowercase
{{ name | lowercase}}

Input:Jayaram

jayaram
uppercase
{{ name | uppercase}}

Input:Jayaram

JAYARAM
Number
{{ value | number : 2}}

Input: 12390232.33433

12,390,232.33
orderBy
{{ employees | orderBy : +salary}}

JSON Data:[{“empName”:”vijay”,”sex”:”M”,”salary”:10000},{“empName”:”Aruna”,”sex”:”F”,”salary”:25000},{“empName”:”Jayaram”,”sex”:”M”,”salary”:23000},{“empName”:”John”,”sex”:”M”,”salary”:980000},{“empName”:”Rashmi”,”sex”:”F”,”salary”:12233}]

Salaries in Ascending:

vijay M 10000
Rashmi F 12233
Jayaram M 23000
Aruna F 25000
John M 980000
limitTo
{{ numbers | limitTo : 4 : 6}} 
{{limitText | limitTo:5:1}}

Numbers: [1,2,3,4,5,6,7,8,9,10]

limitText: Hello,This is Jayaram

Result1: [7,8,9,10]
Text Eg: ello,
filter
{{ employees | filter : 'Joh' }}

JSON Array: [{“empName”:”vijay”,”sex”:”M”,”salary”:10000},{“empName”:”Aruna”,”sex”:”F”,”salary”:25000},{“empName”:”Jayaram”,”sex”:”M”,”salary”:23000},{“empName”:”John”,”sex”:”M”,”salary”:980000},{“empName”:”Rashmi”,”sex”:”F”,”salary”:12233}]

[{“empName”:”John”,”sex”:”M”,”salary”:980000}]

 

AngularJS Filters Code Snippets:

<html>
<head>
 <link rel="stylesheet" href="../css/bootstrap.min.css">
 <title>Filters</title>
</head>
<body ng-app="myApp" ng-controller="FilterController">
 
 <div class="container">

 <h1>Filters Sample Code Snippets </h1>
 <table class="table table-bordred">
 <tr class="success">
 <th >Filter Name</th> 
 <th>Filter Code</th>
 <th > Result </th>
 </tr>
 <tr>
 
 <td> Currency</td> 
 <td><b>Code</b>{{currencyCode}}<br/>
 <b>Input:</b>Enter Cost: <input ng-model="cost" /> 
 </td> 
 <td>Result: {{cost | currency}} <br/>{{cost | currency:"USD$"}} <br/> {{cost | currency:"USD$":0}}</td>
 </tr>
 <tr>
 
 <td> Date</td> 
 
 <td>{{dateCode}} <br/>Input:{{today}} </td>
 <td> 1. {{today | date:'MM/dd/yyyy'}} <br/> 2. {{today | date:'yyyy-MM-dd'}} <br/> 3. {{today | date:"medium"}}</td>
 </tr>
 <tr>
 
 <td> JSON</td> 
 
 <td>{{jsonByCode}}
 </br> <b>JSON Object: </b>{{employees}}
 </td>
 
 <td> <b>JSON String:</b>{{employees | json:5}}</td>
 </tr>
 <tr>
 
 <td> lowercase</td> 
 <td>{{lowerCode}} <br/>Input:{{name}}</td>
 <td> {{name | lowercase}}</td>
 </tr>
 <tr>
 
 <td> uppercase</td> 
 
 <td>{{upperCode}} <br/>Input:{{name}}</td>
 
 <td> {{name | uppercase}}</td>
 </tr>
 <tr>
 
 <td> Number</td> 
 
 <td>{{numberCode}} <br/>{{value}}</td>
 
 <td> {{value | number:2}}</td>
 </tr>
 <tr>
 
 <td> orderBy</td>
 
 <td>{{orderByCode}}<br/>JSON Data:{{employees}} </td>
 <td>
 <b> Salaries in Ascending:</b>
 <table>
 <tr ng-repeat="emp in employees | orderBy:'+salary'">
 <td>{{emp.empName}}</td>
 <td>{{emp.sex}}</td>
 <td>{{emp.salary}}</td>
 </tr>
 </table>

 </td>
 </tr>
 <tr>
 
 <td> limitTo</td>
 
 <td>{{limitToCode}}<br/>Numbers Array: {{numbers}} <br/> Text: {{limitText}}</td>

 <td> Result1: {{numbers | limitTo:4:6}} <br/> Text Eg: {{limitText | limitTo:5:1}} </td>
 </tr>
 <tr>
 
 <td> filter</td> 
 
 <td>{{filterCode}} </br>JSON Array: {{employees}} </td>
 <td> {{ employees | filter : 'Joh' }}</td>
 </tr>
 </table>
 </div>
 
 
</body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
 <script>

 var app = angular.module('myApp',[]);
 app.controller('FilterController',['$scope',function( $scope){

 //Ignore this as these are used to display on UI
 $scope.currencyCode="{{cost | currency:'USD$':0}}"; 
 $scope.dateCode="{{ today | date : 'yyyy-MM-dd'}}" 
 $scope.lowerCode = "{{ name | lowercase}}"; 
 $scope.upperCode = "{{ name | uppercase}}"; 
 $scope.orderByCode = "{{ employees | orderBy : +salary}}"; 
 $scope.numberCode = "{{ value | number : 2}}" ; 
 $scope.jsonByCode = "{{ employees | json : 5}}"; 
 $scope.limitToCode="{{ numbers | limitTo : 4 : 6}} {{limitText | limitTo:5:1}} "; 
 $scope.filterCode = "{{ employees | filter : 'Joh' }}";
 $scope.numbers=[1,2,3,4,5,6,7,8,9,10];
 $scope.limitText="Hello,This is Jayaram";
 $scope.today = new Date();
 $scope.name = "Jayaram";
 $scope.value = 12390232.33433;
 $scope.employees = [
 {empName: 'vijay', sex: 'M', salary: 10000},
 {empName: 'Aruna', sex: 'F', salary: 25000},
 {empName: 'Jayaram', sex: 'M', salary: 23000},
 {empName: 'John', sex: 'M', salary: 980000},
 {empName: 'Rashmi', sex: 'F', salary: 12233},
 ];
 }]);
 
 </script>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *