What are Filters in AngularJS ?
Last Updated :
04 Aug, 2022
In this article, we will be discussing filters in AngularJS. Filters can be added in AngularJS to format data to display on UI without changing the original format. Filters can be added to an expression or directives using the pipe | symbol.
{{expression | filterName:parameter }}
AngularJS Filters: AngularJS provides filters to transform data of different data types. The following table shows the significant filters:
- currency: It is used to convert a number into a currency format.
- date: It is used to convert a date into a specified format.
- filter: It is used to filter the array and object elements and return the filtered items.
- json: To convert a JavaScript object into JSON.
- limitTo: It is used to return an array or a string that contains a specified number of elements.
- lowercase: It is used to convert a string into lowercase letters.
- uppercase: It is used to convert a string into uppercase letters.
- number: It is used to convert a number into a string or text.
- orderBy: It sorts an array based on specified predicate expressions.
Currency Filter: This filter is used to convert a number into a currency format. When no currency format is implemented, the currency filter uses the local currency format.
Syntax:
{{ currency_expression | currency : symbol : fractionSize}}
Example 1: This example describes the Currency Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS Currency Filter </h3>
<div ng-app="app1" ng-controller="costCtrl">
<h2>Price: {{ price | currency }}</h2>
</div>
<script>
var app = angular.module("app1", []);
app.controller("costCtrl", function($scope) {
$scope.price = 100;
});
</script>
<p>
This currency filter formats a
number to a currency format.
</p>
</body>
</html>
|
Output:
Date Filter: This filter is used to convert a date into a specified format. If the date format is not specified, then the default format of date is used ‘MMM d, yyyy’.
Syntax:
{{ date | date : format : timezone }}
Example 2: This example describes the Date Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body ng-app style="text-align:center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS Date Filter</h3>
<div ng-init="person.DOB = 323234234898">
Default date: {{person.DOB| date}}<br />
Medium date: {{person.DOB| date:'medium'}}<br />
Full date: {{person.DOB | date:'fullDate'}} <br />
Year: {{person.DOB | date:'yyyy'}}<br />
</div>
</body>
</html>
|
Output:
filter Filter: This filter is used to filter the array and object elements and return a new array.
Syntax:
{{ expression | filter : filter_criteria }}
Example 3: This example describes the filter Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS Date Filter</h3>
<div ng-app="app1" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module("app1", [])
.controller("namesCtrl", function($scope) {
$scope.names = ["Dhoni",
"Virat",
"Sachin",
"Rohit",
"Suresh",
"Sehwag",
"Zadeja",
"Ashwin",
"Harbhajan", ];
});
</script>
<p>
This example displays only the
names containing the letter "i".
</p>
</body>
</html>
|
Output:
json Filter: This filter is used to convert a JavaScript object into JSON.
Syntax:
{{ object | json : spacing }}
Example 4: This example describes the json Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body style="text-align: center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS json Filter</h3>
<div ng-app="vegetable"
ng-controller="vegetableCtrl">
<h1>Vegetable:</h1>
<pre>{{vegetable | json : 10}}</pre>
</div>
<script>
var app = angular.module("vegetable", []);
app.controller("vegetableCtrl", function($scope) {
$scope.vegetable = ["Beetroot",
"Carrot",
"Potato",
"Asparagus", "Eggplant",
];
});
</script>
</body>
</html>
|
Output:
limitTo Filter: This filter is used to return an array or a string that contains a detailed number of elements. It is used for strings and numbers. It returns a string containing only the specified number of digits and characters.
Syntax:
{{ object | limitTo : limit : begin }}
Parameters:
- limit: Specifies the length of the returned array or strings.
- Begin: Specifies the index with which the limitation begins. By default, its value is zero.
Example 5: This example describes the limitTo Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<div ng-app="app1" ng-controller="sizeCtrl">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS limitTo Filter</h3>
<p>
Displays only the first 3 cars because
limit is 3 (positive).
</p>
<ul>
<li ng-repeat="x in cars | limitTo : 3">
{{x}}
</li>
</ul>
<p>
Displays only the last 3 cars because limit
is -3 (negative).
</p>
<ul>
<li ng-repeat="x in cars | limitTo : -3">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module("app1", []);
app.controller("sizeCtrl", function($scope) {
$scope.cars = ["Alto",
"Breeza",
"ciaz",
"Maruti",
"Fortuner",
"Verna"];
});
</script>
</body>
</html>
|
Output:
lowercase: This filter is used to convert a string into lowercase letters.
Syntax:
{{expression|lowercase}}
Example 6: This example describes the lowercase Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS lowercase Filter</h3>
<div ng-app="app1" ng-controller="lowCtrl">
<strong>Input:</strong>
<input type="text" ng-model="string" />
<br><br>
<strong>Output:</strong>
{{string|lowercase}}
</div>
<script>
var app = angular.module("app1", []);
app.controller("lowCtrl", function($scope) {
$scope.string = "";
});
</script>
</body>
</html>
|
Output:
uppercase: This filter is used to convert a string into an uppercase letter.
Syntax:
{{ string | uppercase}}
Example 7: This example describes the uppercase Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS uppercase Filter</h3>
<div ng-app="app1" ng-controller="upCtrl">
<strong>Input:</strong>
<input type="text" ng-model="string" />
<br><br>
<strong>Output:</strong>
{{string|uppercase}}
</div>
<script>
var app = angular.module("app1", []);
app.controller("upCtrl", function($scope) {
$scope.string = "";
});
</script>
</body>
</html>
|
Output:
number Filter: This filter is used to convert a number into a string or text.
Syntax:
{{ string| number : fractionSize}}
Example: This example describes the number Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body style="text-align:center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS number Filter</h3>
<div ng-app="app1" ng-controller="nCtrl">
<h1>{{value | number : 4}} kg</h1>
</div>
<script>
var app = angular.module("app1", []);
app.controller("nCtrl", function($scope) {
$scope.value = 34355;
});
</script>
<p>The value is written with three decimals.</p>
</body>
</html>
|
Output:
orderBy Filter: This filter sorts an array based on specified predicate expressions.
Syntax:
{{ orderBy_expression | orderBy : expression : reverse }}
Example 9: This example describes the orderBy Filter in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body ng-app="app1">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS orderBy Filter</h3>
<div ng-controller="myController">
<select ng-model="SortOrder">
<option value="+name">Name (asc)</option>
<option value="-name">Name (dec)</option>
<option value="+phone">Phone (asc)</option>
<option value="-phone">Phone (dec)</option>
</select>
<ul ng-repeat="person in persons | orderBy:SortOrder">
<li>{{person.name}} - {{person.phone}}</li>
</ul>
</div>
<script>
var myApp = angular.module("app1", []);
myApp.controller("myController", function($scope) {
$scope.persons = [{
name: "John",
phone: "008-452-8276"
}, {
name: "Mahira",
phone: "879-303-3345"
}, {
name: "Minakshi",
phone: "545-474-4351"
}, {
name: "Billa",
phone: "545-788-5678"
}, {
name: "vanya",
phone: "463-494-8705"
}, {
name: "Rashi",
phone: "315-315-5698"
}, ];
$scope.SortOrder = "+name";
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...