AngularJS Filters
Filters in AngularJS are used to filter and format data displayed on the View. They can be used in view, controllers and services to filter data. AngularJS comes with built-in filters but we can define our own custom filters as well.
Built-In filters:
| Name | Description |
|---|---|
| filters | Filters an array or collection using the given condition or expression |
| currency | Formats a number as a Currency (Ex: $100,000). When no currency symbol is provided, it uses current locale symbol and formats it. |
| number | formats a text into a number. It also have option to format decimal places. If the input text is not a integer, it will return an empty string. |
| date | Formats input date to a string based on the request date format. |
| json | Converts a Javascript object into a JSON string. It is mostly useful for debugging purposes. |
| lowercase | Converts a string into lowercase string. |
| uppercase | Converts a string into uppercase string. |
| limitTo | limitTo creates a new array or string containing only specified number of elements. This can be from the beginning or from the end of the source array, string, number. Other array-like objects are also supported e.g. array subclasses, NodeLists, jqLite/JQuery collections. It returns the value in string, if input is in number format. |
| orderBy | It filters a collection using the expressions supplied and returns it. |
Filter Example:
In the following example, we will use ng-repeat directive to print the array collection on a table control. We will use filter to filter out data in the array using ng-model variable. Here, lowercase, uppercase, date, currency.
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<p>Search: <input type="text" ng-model="searchTerm"></input> </p>
<table class="table table-bordered table-hover" style="width:700px;background-color: #fff;">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
<th>DOJ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchTerm">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.department | lowercase}}</td>
<td>{{employee.salary | currency}}</td>
<td>{{employee.DOJ | date:'dd-MMM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.employees = [
{name:"John",department:"IT Support",salary:"42000",DOJ:"2020-09-15"},
{name:"Rick",department:"IT Support",salary:"50000",DOJ:"2020-01-26"},
{name:"Mathew",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"},
{name:"Rose",department:"Software Development",salary:"80000",DOJ:"2018-05-16"},
{name:"Johnson",department:"Software Development",salary:"150000",DOJ:"2015-12-18"},
{name:"Jay",department:"Product Lead",salary:"140000",DOJ:"2018-07-31"},
{name:"Robin",department:"Quality Analyst",salary:"73000",DOJ:"2017-07-25"},
{name:"Mark",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"}
];
});
</script>
</html>
OUTPUT:
In the above example, Name column is filtered using uppercase filter, Department using lowercase, Salary using currency and DOJ using date filter.
Using Filter filter:
We can use Filter filter can be used to filter an array. It filters out data using the expression provided and returns matching data items.
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<table class="table table-bordered table-hover" style="width:700px;background-color: #fff;">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
<th>DOJ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:'Support'">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.department | lowercase}}</td>
<td>{{employee.salary | currency}}</td>
<td>{{employee.DOJ | date:'dd-MMM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.employees = [
{name:"John",department:"IT Support",salary:"42000",DOJ:"2020-09-15"},
{name:"Rick",department:"IT Support",salary:"50000",DOJ:"2020-01-26"},
{name:"Mathew",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"},
{name:"Rose",department:"Software Development",salary:"80000",DOJ:"2018-05-16"},
{name:"Johnson",department:"Software Development",salary:"150000",DOJ:"2015-12-18"},
{name:"Jay",department:"Product Lead",salary:"140000",DOJ:"2018-07-31"},
{name:"Robin",department:"Quality Analyst",salary:"73000",DOJ:"2017-07-25"},
{name:"Mark",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"}
];
});
</script>
</html>
Here, it is using the term ‘Support’ in filter expression, so it will only items from source array matching the term ‘Support’. In the first example, it use ng-model model variable to filter out the data.
Currency filter:
Currency filter returns the data in the specified currency format.
Example:
<html>
<meta charset="utf-8">
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<p> Number is {{amount}}</p>
<p> In USD format {{amount | currency:'$'}}</p>
<p> Without Decimal {{amount | currency:'$':0}}</p>
<p> In EURO format {{amount |currency:'£'}}</p>
<p> In Rupee format {{amount |currency:'₹'}}</p>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.amount = "4545665";
});
</script>
</html>
OUTPUT:
OrderBy filter:
The OrderBy filter orders or sorts an array using the item object name supplied to it. It is defined by declaring orderBy: 'object'
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<p>Search: <input type="text" ng-model="searchTerm"></input> </p>
<table class="table table-bordered table-hover" style="width:700px;background-color: #fff;">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
<th>DOJ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchTerm | orderBy: 'name'">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.department | lowercase}}</td>
<td>{{employee.salary | currency}}</td>
<td>{{employee.DOJ | date:'dd-MMM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.employees = [
{name:"John",department:"IT Support",salary:"42000",DOJ:"2020-09-15"},
{name:"Rick",department:"IT Support",salary:"50000",DOJ:"2020-01-26"},
{name:"Mathew",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"},
{name:"Rose",department:"Software Development",salary:"80000",DOJ:"2018-05-16"},
{name:"Johnson",department:"Software Development",salary:"150000",DOJ:"2015-12-18"},
{name:"Jay",department:"Product Lead",salary:"140000",DOJ:"2018-07-31"},
{name:"Robin",department:"Quality Analyst",salary:"73000",DOJ:"2017-07-25"},
{name:"Mark",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"}
];
});
</script>
</html>
OUTPUT:
References: AngularJS API DOC