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:
|
|||||||||||||||
| 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>
