In this article, I am going to explain you AngularJS bulit-in filters and custom filter with example. Below are the AngularJS built-in filters.
uppercase: It converts string into upper case.lowercase: It converts string into upper case.orderBy: It is use to sort array data.currency: It converts number to currency.filter: It select subset from an array.date: Format a date to a specified formatjson: Format an object to a JSON string.limitTo: Limits an array/string, into a specified number of elements/characters.number: Format a number to a string.Custom : You can create own filter as shown below in example.
Filters can be added to expressions by using the pipe character |, followed by a filter.
1) uppercase Filter:
The uppercase filter is use to convert string into upper case.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.FirstName = "John";
$scope.LastName = "Doe";
});
</script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
First name: {{FirstName | uppercase}}
</div>
</body>
</html>
2) lowercase Filter:
The lowercase filter is use to convert string into lower case.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.FirstName = "John";
$scope.LastName = "Doe";
});
</script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Last name: {{LastName | lowercase}}
</div>
</body>
</html>
3) orderBy Filter:
The orderBy filter is use to sort array data in ascending or descending order. Here we are using orderBy with ng-repeat directive.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.countries = [
{ name: "rahul"
,
country:
"India" },
{ name: "Mike"
,
country:
"Usa" },
{ name: "Mary"
,
country:
"Australia" }
];
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<ul ng-repeat
="c
in countries |
orderBy:'country' ">
<li>{{c.name +' , '+ c.country}}</li>
</ul>
</body>
</html>
Result:
Mary , Australia
rahul , India
Mike , Usa
By default it will sort data in ascending order, you can use + for ascending order and - for descending order.
<ul ng-repeat
="c
in countries | orderBy:'
-country' ">
<li>{{c.name +' , '+ c.country}}</li>
</ul>
Result:
Mike , Usa
rahul , India
Mary , Australia
You can also use reverse parameter which will reverse data. You can set reverse parameter to true or false as shown below.
Here, we are first sorting data in ascending order then revering (sorting in descending order).
<ul ng-repeat
="c
in countries | orderBy:'country':
true">
<li>{{c.name +' , '+ c.country}}</li>
</ul>
Result:
Mike , Usa
rahul , India
Mary , Australia
4) currency Filter
The currency Filter converts number to currency. By default dollar curreny in applied.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.price = 58;
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
price: {{price | currency}}
</body>
</html>
Result:
You can add and remove currency as shown below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.price = 58;
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
rupee currency<br />
price: {{price | currency:"₹"}} <br /><br />
dollar currency<br />
price: {{price | currency:"$"}}<br /><br />
remove currency<br />
price: {{price | currency:value=""}} <br /><br />
remove currency<br />
price: {{price | currency:""}}
</body>
</html>
Result:
rupee currency
price: ₹58.00
dollar currency
price: $58.00
remove currency
price: 58.00
remove currency
price: 58.00
5) filter Filter:
The filter Filter is used to return subset from an array if record is matched. Here, we are searching in names array which contains letter 'a'.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.names = [
{ name: "Rahul" },
{ name: "Mike" },
{ name: "Mary" },
{ name: "Sumit" },
{ name: "Deepak" }
];
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<ul ng-repeat
="n
in names | filter:'a' ">
<li>{{n.name}}</li>
</ul>
</body>
</html>
Result:
filter Filter with TextBox search:
We will take user input from textbox and apply filter Filter using ng-model as shown below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.names = [
{ name: "Rahul" },
{ name: "Mike" },
{ name: "Mary" },
{ name: "Sumit" },
{ name: "Deepak" }
];
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<input type="text" ng-model="searchByname" />
<ul ng-repeat
="n
in names | filter :
searchByname ">
<li>{{n.name}}</li>
</ul>
</body>
</html>
Result:
orderBy Filter with user Input:
We will sort data using orderBy filter with input from user. Here, data is sorted by name column in ascending order initially after that on click of table header, data is sorted by name and country column using ng-click directive.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.countries = [
{ name: "Yogendra"
,
country:
"India" },
{ name: "Mike"
,
country:
"Usa" },
{ name: "Mary"
,
country:
"Australia" },
{ name: "Sumit"
,
country:
"Canada" }
];
$scope.orderByName = "name";
//
set order by name initially
$scope.orderByX = function
(input) {
debugger;
$scope.orderByName = input;
};
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<table border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th ng-click="orderByX('name')">
Click
here for Order by name
</th>
<th ng-click="orderByX('country')">
Click
here for Order by country
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat
="c
in countries |
orderBy:orderByName ">
<td>{{c.name}}</td>
<td>{{c.country}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Result:
6) date Filter:
The date filter is use to formats a date to a specified format.
The date can be a date object, milliseconds, or a datetime string like "2016-01-05T09:05:05.035Z".
By default, the format is "MMM d, y" (Jan 5, 2016).
Syntax: {{ dateVariable | date : format : timezone }}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.CurrentDate = new
Date();
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<p>
Current
Date is : {{
CurrentDate | date }}</p>
</body>
</html>
Result:
Current Date is : Mar 9, 2019
7) json Filter:
The json filter converts a JavaScript object into a JSON string.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.Employee = {
"Id": "101",
"Name": "John"
};
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<pre>{{Employee | json}}</pre>
</body>
</html>
Result:
{
"Id": "101",
"Name": "John"
}
8) limitTo Filter:
The limitTo filter returns an array or a string containing only a specified number of elements.
When the limitTo filter is used for arrays, it returns an array containing only the specified number of items.
When the limitTo filter is used for strings, it returns a string containing, only the specified number of characters.
When the limitTo filter is used for numbers, it returns a string containing only the specified number of digits.
Use negative numbers to return elements starting from the end of the element, instead of the beginning.
Syntax: {{ object | limitTo : limit : begin }}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.Numbers = [55, 20, 5, 100,
60];
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<ul>
<li ng-repeat
="n
in Numbers |
limitTo : 2">
{{n}}
</li>
</ul>
</body>
</html>
Result:
9) number Filter:
The number filter formats a number to a string.
Syntax: {{ string | number : fractionsize }}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.Numbers = 150505;
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<span>{{Numbers | number}}</span>
</body>
</html>
Result:
10) Custom Filter:
We can create own filter and attached filter to particular module. Here, in below example we are converting employee gender as Male, Female or Gender unknown depend on the column data that is 1, 2 or 0.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script>
var
app =
angular.module(
"myModule"
,
[]);
app.controller("myController", function
($scope) {
$scope.employees = [
{ name: "Rahul"
,
gender:
"1" },
{ name: "Mike"
,
gender:
"1" },
{ name: "Mary"
,
gender:
"2" },
{ name: "Sumit"
,
gender:
"1" },
{ name: "XYZ"
,
gender:
"0" }
];
});
app.filter("genderFilter", function () {
return function
(x)
{
var
out
=
"";
if
(x
==
"1") {
out = "Male";
}
else if
(x
==
"2") {
out = "Female";
}
else {
out =
"Gender
unknown"
;
}
return out;
}
});
</script>
</head>
<body ng-app="myModule" ng-controller="myController">
<table border="1" style="border-collapse:collapse;">
<tr>
<th>Name</th>
<th>
Gender
from database
</th>
<th>
Gender
by using custom filter
</th>
</tr>
<tr ng-repeat
="e
in employees">
<td>{{e.name}}</td>
<td>{{e.gender}}</td>
<td>{{e.gender | genderFilter}}</td>
</tr>
</table>
</body>
</html>
Result:
