{{expression | filterName:parameter }}
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. |
<!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>
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>
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>
<!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>
<!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>
|
, 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>
<!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>