Introduction To Filters In AngularJS

Filters

Filters format the values for display. Filters format the result which is required by the user to display. Filters can be used in services, templates and controllers. There are various built in filters in Angular. We can also create our own filters. API is used in $filterprovider. Filters are added to format the data.

Various Built in Filters are,

currency- Format a number to currency format.
date- Format a date to a specified format.
filter- It selects a subset of items in an array.
limitTo - It limits an array or a string into the specified number of elements or characters respectively.
lowercase- It formats a string to lowercase.
uppercase - It formats a string to upper case.
orderBy- It orders an array by an expression.
json - It formats an object to a JSON string.

Let’s understand with an example how we can use a filter to the expressions.

Filters can be added to an expression, using the pipe character “|”, followed by a filter.

e.g

<div ng-app="myApp" ng-controller="myController">
<p>My Name: {{ firstName | uppercase }} {{ lastName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.firstName = "jasbeer",
$scope.lastName = "singh"
});
</script>

In this example, we have used uppercase filter. As you can see, we have provided firstName and lastName properties to $scope and in view, we have used filter as uppercase to both the properties, so the result will be in uppercase. Let’s run this and check the output.

Now, we can see that the firstName and lastName are in upper case letters because of the filters used.

We can also use filters with the Directives. Filters are added to the Directives by using the pipeline character “|”, followed by filter.

Let’s understand this with an example how we can use the filter with the Directives.

Example

View

<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="dirScript.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="dirController">
<ul>
<li ng-repeat="x in names | orderBy:'lname'">
{{ x.fname + ' ' + x.lname }}
</li>
</ul>
</div>
</body>

Script

angular.module('myApp', []).controller('dirController', function ($scope) {
$scope.names = [
{ fname: 'Jasbeer', lname: 'Singh' },
{ fname: 'Jatinder', lname: 'Singh' },
{ fname: 'Randeep', lname: 'Singh' },
{ fname: 'Jasmeen', lname: 'Kaur' },
{ fname: 'Jasleen', lname: 'Kaur' },
];
});

Here, in the example given above, we have used filter orderBy, which filters the names according to their lastname.

If we run this, we will get the names orderBy lastname and the output will be, as shown below.

Now, we will see an example, where the user uses filter.

View

<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="filterScript.js"></script>
</head>
<body>
<div ng-app="myfilterApp" ng-controller="filterController">
<p>Type a letter in the input field to filter the names:</p>
<p><input type="text" ng-model="fname"></p>
<ul>
<li ng-repeat="x in names | filter:fname">
{{ x }}
</li>
</ul>
</div>
</body>

Script

angular.module('myfilterApp', []).controller('filterController', function ($scope) {
$scope.names = [
'Jasbeer',
'Jasmeen',
'Randeep',
'Sandeep',
'Rashmi'
];
});

Now, if you run this, we will get all the names with a textbox to filter. If we input any letter, it will find the letter in names and will output the name having that letter.

In the output, we have entered and we have inputted letter R, so we got the names having letter R.

Custom Filters

We have seen built in filters, now we will create our own filters for use. We can do this by making our own filter and registering a new filter factory function with our module.

Let’s create a custom filter to make the words in lower case letters without using built in filter. It will format the upper case letters to lower case letters.

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
<ul ng-app="myApp" ng-controller="customController">
<li ng-repeat="x in names">
{{x | customFilter}}
</li>
</ul>
</body>
</html>

Script

var app = angular.module('myApp', []);
app.filter('customFilter', function () {
return function (x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
c = c.toLowerCase();
txt += c;
}
return txt;
};
});
app.controller('customController', function ($scope) {
$scope.names = ['JASBEER',
'SINGH',
'JATINDER',
'SAAKIB',
'WANI'];
});

You can see here in the example given above that we have written all the names in capital letters and assigned to the property names of the $scope. In the view, we have applied our custom filter, which we have created in the script and converted all the capital letters to small and displayed on the view for the user. If we run this, we will get all the names in small letters.

Output

All the names are in small letters. In the script, we have created our custom filter.

app.filter('customFilter', function () {
return function (x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
c = c.toLowerCase();
txt += c;
}
return txt;
};
});

It is used in the view to filter the names to capital letters.

<li ng-repeat="x in names">
{{x | customFilter}}
</li>

In the templates, the filters are executed when their input is changed.

This has covered the basics of filters in AngularJS. Please provide your valuable feedback after going through the article.

5 Comments

Join the conversation! Your thoughts help the community grow.

sanjay gupta9y ago
Nice Article with proper example for basic learning
Jasbeer Singh9y ago
Thankyou Sachin .. thanks for appreciating
Sachin Chourasia9y ago
Awesome..ur all articles r so simple nd easy 2 understand..becomes ur FAN.....
Jasbeer Singh9y ago
Welcome Neha, you must go through all articles of AngularJS
Neha9y ago
Thanks for sharing Jasbeer............