Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use filters in AngularJS?
First, we look into what filters in angularjs and then how to use them.
Filters are used to format the value of an expression to display on the UI to the user without changing the original format. Filters will be added to an expression using the pipe | operator. Like,
{{expression | filterName}}
Angularjs provides some built-in filters to format the data. Like, as currency, uppercase, lowercase, number, orderBy, limitTo, json, filter, and date.
Now, we look into how to use them in our code using angularjs.
AngularJS Currency Filter
This filter is used to format the data into a currency format.
Syntax
{{ currencyExp | currency: symbol: fractionSize}}
Here, symbol and frantionsize are optional. If there is no symbol specified it will be considered as $ by default.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="’currencyCtrl’">
<h2>Currency Filter:</h2>
<p>{{cost | currency: "Rs": 2}}</p>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('’currencyCtrl’', function($scope) {
$scope.cost = 78.947;
});
</script>
</body>
</html>
AngularJS UpperCase Filter
The uppercase filter is used to format a string into uppercase.
Syntax
{{ string | uppercase }}
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS uppercase Filter</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong>
<input type="text" ng-model="string">
<br><br>
<strong>Output:</strong>
{{string|uppercase}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.string = "";
});
</script>
</body>
</html>
Now, when a user enters any data in the input field, the name is displayed in upper case.
AngularJs LowerCase Filter
The lowercase filter is used to format a string into lowercase letters.
Syntax
{{ string | lowercase }}
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1>AngularJS lowercase Filter</h1>
<div ng-app="sampleApp" ng-controller="lowecaseCtrl">
<label>Enter Name:</label>
<input type="text" ng-model="userName" />
<br/><br/>
<label>Output:</label> {{userName | lowercase}}
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller("lowecaseCtrl", function($scope) {
$scope.userName = "";
});
</script>
</body>
</html>
AngularJS Number Filter
The number filter is used to convert a number filter into a string or text.
Syntax
{{ string | number : fractionsize }}
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS number Filter</h2>
<div ng-app="sampleApp" ng-controller="numberCtrl">
<h3>{{value | number : 2}}</h3>
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller("numberCtrl", function($scope) {
$scope.value = 22.6777;
});
</script>
</body>
</html>
If it is a decimal number, it will be rounded to the nearest value based on the given number. It is not a decimal like 22 if we apply a number filter. It will display at 22.00. Just a number filter adds a given number of zeros after a decimal point.
AngularJS orderBy Filter
The orderBy filter sorts an array based on specified expressions.
Syntax
{{ orderByExp | orderBy : expression : reverse : comparator }}
Example
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="orderByCtrl">
<h3> AngularJS orderBy Filter</h3>
<ul>
<li ng-repeat="x in users | orderBy: 'firstName'">
{{ x.firstName + " " + x.lastName}}
</li>
</ul>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('orderByCtrl', function($scope) {
$scope.users = [
{"firstName": "Tom", "lastName": "Mattie"},
{"firstName": "Leena", "lastName": "Ketan"},
{"firstName": "Robert", "lastName": "Cactus"},
{"firstName": "Tomas", "lastName": "Matrass"},
{"firstName": "Caroline", "lastName": "Martes’s"},
];
});
</script>
</body>
</html>
AngularJS
limitTo Filter The limitTo filter used to return an array or a string that contains a specified number of elements.
Syntax
{{ object | limitTo : limit : begin }}
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<h2>AngularJS limitTO filter</h2>
<p> Enter a string with more than four characters</p>
<div ng-app="sampleApp" ng-controller="limitToCtrl">
<label>Input:</label>
<br>
<input type="text" ng-model="limit">
<br>
<br>
<label>Output:</label>
<br> {{limit|limitTo:4}}
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('limitToCtrl', function($scope) { $scope.limit = ""; });
</script>
</body>
</html>
AngularJS json filter
The json filter is used to convert a JavaScript object into a JSON string. The js object can be of any type of object.
Syntax
{{ object | json : spacing }}
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="jsonCtrl">
<h2>AngularJS json filter</h2>
<h3>User Details:</h3>
<p>{{user | json}}</p>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('jsonCtrl', function($scope) { $scope.user = { "name": "Tom Tessa", "city": "Berlin", "country": "Germany" }; });
</script>
</body>
</html>
AngularJS filter Filter
The filter is used to filter an array and gives output as an array with only matching items. In simple words, the filter Filter is subset of an array from an original array.
Syntax
{{arrayexpression | filter: expression : comparator : anyPropertyKey}}
Example
Here, filter words only contain “n” alphabet.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="filterCtrl">
<h1>AngularJS filter Filter</h1>
<ol>
<ul>
<li ng-repeat="f in fruits | filter : 'n'">
{{ f }}
</li>
</ul>
</ol>
</div>
<script>
angular.module('sampleApp', []).controller('filterCtrl', function($scope) {
$scope.fruits = [
'Mango', 'Banana', 'Grapes',
'Oranges', 'Apples',
'Papaya', 'Dragon', 'Kiwi', 'Custards'
];
});
</script>
</body>
</html>
AngularJS date Filter
The date filter is used to convert a date into a specified date format. The date can be any date object or datetime string. By default, date format is “MMM d, y”.
Syntax
{{ date | date: format : timezone }}
Time zone and format optional here. We can format like whichever format we like to display the time. Like,
yyyy – Year (2022)
yy – Year (22)
y – Year (2022)
MMMM – Month (April)
MM – Month (04)
M – Month (4)
dd – Day (06)
d – Day (6)
HH – Hours in 00-23 (05)
H – Hours in 0-23 (5)
hh – Hours in am/pm, 00-12 (06)
h – Hours in am/pm, 0-12 (7)
mm – Minutes (05)
m – Minutes (5)
ss – Seconds (05)
s – Seconds (5)
sss – Milli seconds (055)
Z – Time zone from (-1200 to +1200)
EEEE – Day (Sunday)
EEE – Day (Sun)
Example
What to know day from the given date and time
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="dateCtrl">
<h1>Date Filter</h1>
<label>Day from a given date</label>
<p>
{{ data | date : "EEEE"}}
</p>
</div>
<script>
angular.module('sampleApp', []).controller('dateCtrl', function($scope) {
$scope.data = "2020-10-19T09:25:05.035";
});
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="dateCtrl">
<h1>Date Filter</h1>
<label>Date and time from a given date</label>
<p>
<p>{{ data | date : "MM.dd.yyyy.m.sss" }}</p>
</p>
</div>
<script>
angular.module('sampleApp', []).controller('dateCtrl', function($scope) {
$scope.data = new Date();
});
</script>
</body>
</html>
Here, output showed with date and minutes and milliseconds. Like this we can format the dates in a predefined way using format keys.
Above, we discussed what all the filters are and how to use them in AngularJS. These filters are built-in filters in angularjs. We can also create custom filters based on our requirements.
231 Views
