Filters In AngularJS

Article

Introduction

Filters are used to modify the data and can be clubbed in expression or directives using a pipe character. A filter formats the value of an expression for display to the user. They can be used in view templates, controllers, or services, and we can easily create our own filter.

Syntax

Filter can be applied as in the following syntax:

{{ expression | filter }}

We can also apply multiple filter as in the following syntax:

{{ expression | filter1 | filter2 |...}}

Filter may be applied that have some arguments:

{{ expression | filter:argument1:argument2:...}}

Below table show the list of filters that are generally used:

Filter	Description
Uppercase	Converts a text to upper case text.
Lowercase	Converts a text to lower case text.
Currency	Formats text in a currency format.
Filter	Filter the array to a subset of it based on provided criteria.
Orderby	Orders the array based on provided criteria.

Let us take some examples:

Example 1:

<body ng-app="">
<div id="div1"> <span>Enter Name:</span>
<input id="inp1" type="text" ng-model="EmpName" /><br/> <span>Salary Per Day:</span>
<input id="inp2" type="text" ng-model="salaryDay" /><br/> <span>Total Working Day:</span>
<input id="inp3" type="text" ng-model="workingDay" /><br/>
<p>Hello! {{EmpName|uppercase}} Your Salary is {{(salaryDay*workingDay)|currency:"₹"}}</p>
</div>

Output

see Output

In this example we use the “uppercase” and “currency” filter, we define the Indian rupees symbol for currency.

Example 2:

<html>
<head>
<title>Angular JS Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('State', function ($scope)
{
$scope.array = [
{
name: 'Andra Pradesh',
capital: 'Hyderabad'
},
{
name: 'Arunachal Pradesh',
capital: 'Itangar'
},
{
name: "Bihar",
capital: "Patna"
},
{
name: "Chhattisgarh",
capital: "Raipur"
},
{
name: "Goa",
capital: "Panaji"
},
{
name: "Haryana",
capital: "Chandigarh"
},
{
name: "Jammu and Kashmir",
capital: "Srinagar and Jammu"
},
{
name: "Kerala",
capital: "Thiruvananthapuram"
},
{
name: "Mizoram",
capital: "Aizawi"
},
{
name: "Rajasthan",
capital: "Jaipur"
},
{
name: "Sikkim",
capital: "Gangtok"
},
{
name: "Uttaranchal",
capital: "Dehradun"
},
{
name: "West Bengal",
capital: "Kolkata"
}]
})
</script>
<style>
#div1 {
height: 800px;
background-color: crimson;
font-size: 24px
}
span {
margin-left: 100px;
margin-top: 50px;
}
#inp1 {
margin-left: 80px;
margin-top: 20px;
}
table,
th,
td {
border-collapse: collapse;
padding: 5px;
}
tabletr:nth-child(odd) {
background-color: #82F2E5;
font-family: Verdana;
}
tabletr:nth-child(even) {
background-color: blue;
color: white;
font-family: Arial;
}
#div1 {
margin-left: 150px;
margin-top: 20px
}
</style>
</head>
<body ng-app="mainApp">
<div id="div1" ng-controller="State"> <span>Enter Name:</span>
<input id="inp1" type="text" ng-model="StateName" /><br/>
<div id="div1">
<table>
<tr>
<th>State</th>
<th>Capital</th>
</tr>
<trng-repeat="obj in array | filter:StateName | orderBy:'name'">
<td>{{obj.name}}</td>
<td>{{obj.capital}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Output

Web page after page load.

In this example we use the filter and orderby filter. The “filter” filter is used to display only required information as per user input or predefine manner.

Use Filter In Controller

We can also use the filters in controllers. For this we need to inject a dependency with the name <filterName>Filter into our controller. For example if we want to use the number filter in controllers then we need to inject dependency "numberFilter". The injected argument is a function that takes the value to format as first argument, and filter parameters starting with the second argument.

Example:

<html>
<head>
<title>Angular JS Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src="angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('Employee', function ($scope, filterFilter)
{
$scope.filter_ = 'p',
$scope.array = [
{
name: 'Pankaj'
},
{
name: 'Sandeep'
},
{
name: 'Neeraj'
},
{
name: 'Sanjeev'
},
{
name: 'Rahul'
},
{
name: 'Priya'
}],
$scope.sort = function ()
{
varobj = "";
$scope.filteredArray = filterFilter($scope.array, $scope.filter_);
for (obj_ in $scope.filteredArray)
{
obj += $scope.filteredArray[obj_].name + ",";
}
returnobj.substring(0, obj.length - 1);
}
})
</script>
<style>
#div1 {
height: 600px;
width: 400x;
background-color: crimson;
font-size: 24px
}
span {
margin-left: 100px;
margin-top: 50px;
}
input {
margin-left: 20px;
margin-top: 20px;
}
#li1 {
color: #B4E825
}
</style>
</head>
<body ng-app="mainApp">
<div id="div1" ng-controller="Employee"> <span>Enter Name:</span>
<input type="text" ng-model="filter_" /><br/>
<ul>
<li id="li1">{{sort()}}</li>
</ul>
<ul>
<li ng-repeat="entry in array">{{entry.name}}</li>
</ul>
</div>
</body>
</html>

Output

run program

function ($scope, filterFilter)
$scope.filteredArray = filterFilter($scope.array, $scope.filter_);

In above example we define a “filterFilter” filter and this filter used to filter the data from “filteredArray” array as per value of “filter_” .

Create Custom Filter

We can also write our own custom filter. Writing your own filter is very easy, just register a new filter factory function with your module. This uses the "filterProvider" internally. By default the new filter function takes the input value as the first argument and the factory function will return the new filter. The filter function should be a pure function, that means it should be stateless and idempotent. The returned functions in filter are getting invoked every time when AngularJS call the filter. It means, their is a two-way binding for a filter.

Syntax

app.filter('filter name', function () {
   return function (item) {
      return;
   };
});

Example

<html>
<head>
<title>Angular JS Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src="angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.filter('Reverse', function ()
{
return function(item, AltenaterCase)
{
var obj = "";
if (AltenaterCase)
{
for (i = item.length - 1; i >= 0; i--)
{
if (i % 2 == 0)
{
obj += item[i].toUpperCase();
}
else
{
obj += item[i];
}
}
}
else
{
for (i = item.length - 1; i >= 0; i--)
{
obj += item[i];
}
}
return obj;
}
})
mainApp.controller('Employee', function ($scope, filterFilter)
{
$scope.filter_ = 'p',
$scope.array = [
{
name: 'Pankaj'
},
{
name: 'Sandeep'
},
{
name: 'Neeraj'
},
{
name: 'Sanjeev'
},
{
name: 'Rahul'
},
{
name: 'Priya'
}],
$scope.sort = function ()
{
var obj = "";
$scope.filteredArray = filterFilter($scope.array, $scope.filter_);
for (obj_ in $scope.filteredArray)
{
obj += $scope.filteredArray[obj_].name + ",";
}
return obj.substring(0, obj.length - 1);
}
})
</script>
<style>
#div1 {
height: 600px;
width: 400x;
background-color: crimson;
font-size: 24px
}
span {
margin-left: 100px;
margin-top: 50px;
}
input {
margin-left: 20px;
margin-top: 20px;
}
#li1 {
color: #B4E825
}
#li2 {
color: #1DE0B9
}
#li3 {
color: #20E01D
}
</style>
</head>
<body ng-app="mainApp">
<div id="div1" ng-controller="Employee"> <span>Enter Name:</span>
<input type="text" ng-model="filter_" /><br/>
<ul>
<li id="li1">List Without reverse: {{sort()}}</li>
<li id="li2">Reverse List Without AltenaterCase: {{sort()|Reverse}}</li>
<li id="li3">Reverse List With AltenaterCase: {{sort()|Reverse:true}}</li>
</ul>
<ul>
<ling-repeat="entry in array">{{entry.name}}</li>
</ul>
</div>
</body>
</html>

Output

see result

In above example we created a custom filter that is “Reverse.” This function take two parameters, first parameter “item” contains data and the second parameter “AltenaterCase” contains information whether alternation of case (uppercase and lowercase) will perform or not. “Reverse” filter reverses and returns this string to expression.

run

We used this filter two times in the above code. At first time “sort()|Reverse” we retrieved a reverse string and at the second time “sort()|Reverse:true” we retrieved a string that is in reverse order and case of letter in alternate order.

Enter name

Summary

Filters are very powerful features in AngularJS for transforming our data and it is easy to scale and reuse. We can use a filter either in directory or in controller and we can also create custom filter based on our requirement.

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all