Filter is one of the cool features of angularJs. It is used to indicate by pipeline symbol i.e “|”.
Filter can be added to expression and directive using a pipe character. It is used to format the data as per as our requirement.
There is the following filter example
1. Currency
2. Lowercase
3. Order By
4. Uppercase
5. Number
6. Date
7. Json
8. LimitTo
Now let see each filter example one by one
1. Currency Filter in angularJs :
Currency filter is used to format the currency as given below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController" >
Quantity : <input type="number" ng-model="quantity" />
Price: <input type="number" ng-model="price" />
<p>Total: {{quantity*price | currency }} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.quantity = 2;
$scope.price = 200;
});
</script>
</body>
</html>
Other example of Currency Filter with different format
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller("MyController", function ($scope) {
$scope.Qnt = 100;
$scope.Price = 20;
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
Price: <input type= "text" name="Price" value="" ng-model="Price" /> <br /><br />
Quantity: <input type="text" name="Qnt" value=" " ng-model="Qnt" /><br /> <br />
Total in US Dollor : {{ Price*Qnt | currency}} <br />
Totla in RS : {{ Price*Qnt | currency :'Rs.' }} <br />
No Fraction in RS : {{ Price*Qnt | currency:'Rs.':0}} <br />
</div>
</body>
</html>
2. Example of Number Format filter
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
</head>
<body>
<div ng-app="">
Enter the input value: <input type="text" name="InputVal" ng-model="InputVal" value=" " /> <br /><br />
Out Put Value in Number : {{ InputVal | number }} <br />
Out Put Value in Number 2 : {{ InputVal | number:2 }} <br />
Out Put Value in Number 4: {{ InputVal | number:4 }} <br />
</div>
</body>
</html>
3. Example of Lowercase and Uppercase filter
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller("MyController", function ($scope) {
$scope.firstName = "Chandradev";
$scope.LastName = "Prasad";
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
Complete Name (UpperCase)= {{ firstName +' '+ LastName |uppercase }} <br />
Complete Name (LowerCase)= {{ firstName +' '+ LastName |lowercase }} <br />
</div>
</body>
</html>
4. Example of Order by Filter in angularJs
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
<script>
angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.friends =
[{ name: 'Chandradev', phone: '9241503289', age: 25 },
{ name: 'Aman', phone: '9241503281', age: 26 },
{ name: 'Karthik', phone: '9241503282', age: 21 },
{ name: 'Adam', phone: '9241503283', age: 35 },
{ name: 'Rohit', phone: '9241503284', age: 29 }];
}]);
</script>
</head>
<body ng-app="orderByExample">
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:'name'">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>
</html>
5. Example of Date filter in AngularJs
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
</head>
<body ng-app="">
<p>
<label> Select the date</label>
<input type="date" id="date" ng-model="dateValue" />
</p>
<p>
<b> Date Format in Full:</b> {{dateValue | date :'fullDate'}}
</p>
<p>
<b> Date Format in Short: </b> {{dateValue | date :'shortDate'}}
</p>
<p>
<b> Date Format in dd/MM/yyyy:</b> {{dateValue | date :'dd/MM/yyyy'}}
</p>
</body>
</html>
6. Example of Json filter in AngularJs
Json filter is used to filter data in Json format.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../Scripts/angular.js"></script>
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}]);
</script>
</head>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
<label>
<input type="radio" ng-model="color.name" value="red">
Red
</label><br />
<label>
<input type="radio" ng-model="color.name" ng-value="specialValue">
Green
</label><br />
<label>
<input type="radio" ng-model="color.name" value="blue">
Blue
</label><br />
<tt>color = {{color.name | json}}</tt><br />
</form>
</body>
</html>
7. Example of Limit To Filter:
It is used to filter number only upto specified in given range
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
<script>
angular.module('limitToExample', [])
//var app = angular.module("limitToExample", [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.letters = "abcdefghi";
$scope.longNumber = 2345432342;
$scope.numLimit = 3;
$scope.letterLimit = 3;
$scope.longNumberLimit = 3;
}]);
</script>
</head>
<body ng-app="limitToExample">
<div ng-controller="ExampleController">
<label>
Limit {{numbers}} to:
<input type="number" step="1" ng-model="numLimit">
</label>
<p>Output numbers: {{ numbers |limitTo:numLimit }}</p>
<label>
Limit {{letters}} to:
<input type="number" step="1" ng-model="letterLimit">
</label>
<p>Output letters: {{ letters | limitTo:letterLimit }}</p>
<label>
Limit {{longNumber}} to:
<input type="number" step="1" ng-model="longNumberLimit">
</label>
<p>Output long number: {{ longNumber | limitTo:longNumberLimit }}</p>
</div>
</body>
</html>
Summary:
In this article we learn the basic concept of filter in angularJs.
Chandradev's Blog 