Published on: 21 January, 2016

Learn how to use filter in AngularJS

Posted by andy | 807 views 0 likes 0 favourites 1 comments
Tumblr Digg Google Plus

In this tutorial, you will learn how to use the filter feature in AngularJS. When you fetch the data directly from the database in JSON format for example, they are usually unformatted. By using the built in filter, you can achieve the formatting easily.

So how does the filter work in AngularJS? The filter is invoke in the HTML using the | (pipe) character inside the template binding characters of {{ }}.

The following is the example of the most used filters.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
	var myFilterModule = angular.module('filterApp', []);
	myFilterModule.controller('filterExampleController',
		function ($scope) {
			var example = {
				Title: 'Learn AngularJS',
				Name: 'James Angular',
				Date: new Date('25 dec 2015 14:20:30'),
				Price: 53.45552,
				ArrayData: ['AngularJS', 'javascript', 'C#', 'ASP.Net', 'html5']
			};
			$scope.exampleFilter = example;
		}
	);
</script>

<p>The following will be the result output of the filters applied on above code.</p>
	<table class='tblexample' cellpadding='0'>
		<tr class='trheader'>
			<td>Label</td>
			<td>Filter</td>
			<td>Result</td>
		</tr>
		<tr>
			<td>Title</td>
			<td>{{ data | uppercase}}</td>
			<td>{{exampleFilter.Title | uppercase}}</td>
		</tr>
		<tr>
			<td>Author</td>
			<td>{{ data | lowercase}}</td>
			<td>{{exampleFilter.Name | lowercase}}</td>
		</tr>
		<tr>
			<td>Price</td>
			<td>{{ data | number:2 | currency }}</td>
			<td>{{exampleFilter.Price | number:2 | currency }}</td>
		</tr>
		<tr>
			<td>Date (full date)</td>
			<td>{{ data | date:'fullDate' }}</td>
			<td>{{exampleFilter.Date | date:'fullDate'}}</td>
		</tr>
		<tr>
			<td>Date (medium)</td>
			<td>{{ data | date:'medium' }}</td>
			<td>{{exampleFilter.Date | date:'medium'}}</td>
		</tr>
		<tr>
			<td>Date (short)</td>
			<td>{{ data | date:'short' }}</td>
			<td>{{exampleFilter.Date | date:'short'}}</td>
		</tr>
		<tr>
			<td>Date (long date)</td>
			<td>{{ data | date: 'longDate' }}</td>
			<td>{{exampleFilter.Date | date:'longDate'}}</td>
		</tr>
		<tr>
			<td>Date (medium date)</td>
			<td>{{ data | date: 'mediumDate' }}</td>
			<td>{{exampleFilter.Date | date:'mediumDate'}}</td>
		</tr>
		<tr>
			<td>Date (short date)</td>
			<td>{{ data | date: 'shortDate' }}</td>
			<td>{{exampleFilter.Date | date:'shortDate'}}</td>
		</tr>
		<tr>
			<td>Date (medium time)</td>
			<td>{{ data | date: 'mediumTime' }}</td>
			<td>{{exampleFilter.Date | date:'mediumTime'}}</td>
		</tr>
		<tr>
			<td>Date (short time)</td>
			<td>{{ data | date: 'shortTime' }}</td>
			<td>{{exampleFilter.Date | date:'shortTime'}}</td>
		</tr>
		<tr>
			<td>Date (One digit year)</td>
			<td>{{ data | date: 'y' }}</td>
			<td>{{exampleFilter.Date | date:'y'}}</td>
		</tr>
		<tr>
			<td>Date (Two digits year)</td>
			<td>{{ data | date: 'yy' }}</td>
			<td>{{exampleFilter.Date | date:'yy'}}</td>
		</tr>
		<tr>
			<td>Date (Four digits year)</td>
			<td>{{ data | date: 'yyyy' }}</td>
			<td>{{exampleFilter.Date | date:'yyyy'}}</td>
		</tr>
		<tr>
			<td>Date (Full month text)</td>
			<td>{{ data | date: 'MMMM' }}</td>
			<td>{{exampleFilter.Date | date:'MMMM'}}</td>
		</tr>
		<tr>
			<td>Date (Short month abbreviation)</td>
			<td>{{ data | date: 'MMM' }}</td>
			<td>{{exampleFilter.Date | date:'MMM'}}</td>
		</tr>
		<tr>
			<td>Date (two digits month)</td>
			<td>{{ data | date: 'MM' }}</td>
			<td>{{exampleFilter.Date | date:'MM'}}</td>
		</tr>
		<tr>
			<td>Date (one digit month)</td>
			<td>{{ data | date: 'M' }}</td>
			<td>{{exampleFilter.Date | date:'M'}}</td>
		</tr>
		<tr>
			<td>Date (week day)</td>
			<td>{{ data | date: 'EEEE' }}</td>
			<td>{{exampleFilter.Date | date:'EEEE'}}</td>
		</tr>
		<tr>
			<td>Date (Short week day abbreviation)</td>
			<td>{{ data | date: 'EEE' }}</td>
			<td>{{exampleFilter.Date | date:'EEE'}}</td>
		</tr>
		<tr>
			<td>Date (two digits day)</td>
			<td>{{ data | date: 'dd' }}</td>
			<td>{{exampleFilter.Date | date:'dd'}}</td>
		</tr>
		<tr>
			<td>Date (one digit day)</td>
			<td>{{ data | date: 'd' }}</td>
			<td>{{exampleFilter.Date | date:'d'}}</td>
		</tr>
		<tr>
			<td>Date (Hours in 24)</td>
			<td>{{ data | date: 'HH' }}</td>
			<td>{{exampleFilter.Date | date:'HH'}}</td>
		</tr>
		<tr>
			<td>Date (Hours in AM/PM)</td>
			<td>{{ data | date: 'hh' }}</td>
			<td>{{exampleFilter.Date | date:'hh'}}</td>
		</tr>
		<tr>
			<td>Date (AM/PM character only)</td>
			<td>{{ data | date: 'a' }}</td>
			<td>{{exampleFilter.Date | date:'a'}}</td>
		</tr>
		<tr>
			<td>Date (Minute in two digits)</td>
			<td>{{ data | date: 'mm' }}</td>
			<td>{{exampleFilter.Date | date:'mm'}}</td>
		</tr>
		<tr>
			<td>Date (minute in one digit)</td>
			<td>{{ data | date: 'dd' }}</td>
			<td>{{exampleFilter.Date | date:'dd'}}</td>
		</tr>
		<tr>
			<td>Date (Second in two digits)</td>
			<td>{{ data | date: 'ss' }}</td>
			<td>{{exampleFilter.Date | date:'ss'}}</td>
		</tr>
		<tr>
			<td>Date (Second in one digit)</td>
			<td>{{ data | date: 's' }}</td>
			<td>{{exampleFilter.Date | date:'s'}}</td>
		</tr>
		<tr>
			<td>Date (Second in millisecond)</td>
			<td>{{ data | date: '.sss' }}</td>
			<td>{{exampleFilter.Date | date:'.sss'}}</td>
		</tr>
		<tr>
			<td>Date (Timezone offset)</td>
			<td>{{ data | date: 'Z' }}</td>
			<td>{{exampleFilter.Date | date:'Z'}}</td>
		</tr>
		<tr>
			<td>Array filter</td>
			<td>{{ data | filter: 'AngularJS' }}</td>
			<td>{{exampleFilter.ArrayData | filter:'AngularJS'}}</td>
		</tr>
	</table>

You can see the actual result of the filters below.

Label Filter Result
Title data | uppercase {{exampleFilter.Title | uppercase}}
Author data | lowercase {{exampleFilter.Name | lowercase}}
Price data | number:2 | currency {{exampleFilter.Price | number:2 | currency }}
Date (full date) data | date:'fullDate' {{exampleFilter.Date | date:'fullDate'}}
Date (medium) data | date:'medium' {{exampleFilter.Date | date:'medium'}}
Date (short) data | date:'short' {{exampleFilter.Date | date:'short'}}
Date (long date) data | date: 'longDate' {{exampleFilter.Date | date:'longDate'}}
Date (medium date) data | date: 'mediumDate' {{exampleFilter.Date | date:'mediumDate'}}
Date (short date) data | date: 'shortDate' {{exampleFilter.Date | date:'shortDate'}}
Date (medium time) data | date: 'mediumTime' {{exampleFilter.Date | date:'mediumTime'}}
Date (short time) data | date: 'shortTime' {{exampleFilter.Date | date:'shortTime'}}
Date (One digit year) data | date: 'y' {{exampleFilter.Date | date:'y'}}
Date (Two digits year) data | date: 'yy' {{exampleFilter.Date | date:'yy'}}
Date (Four digits year) data | date: 'yyyy' {{exampleFilter.Date | date:'yyyy'}}
Date (Full month text) data | date: 'MMMM' {{exampleFilter.Date | date:'MMMM'}}
Date (Short month abbreviation) data | date: 'MMM' {{exampleFilter.Date | date:'MMM'}}
Date (two digits month) data | date: 'MM' {{exampleFilter.Date | date:'MM'}}
Date (one digit month) data | date: 'M' {{exampleFilter.Date | date:'M'}}
Date (week day) data | date: 'EEEE' {{exampleFilter.Date | date:'EEEE'}}
Date (Short week day abbreviation) data | date: 'EEE' {{exampleFilter.Date | date:'EEE'}}
Date (two digits day) data | date: 'dd' {{exampleFilter.Date | date:'dd'}}
Date (one digit day) data | date: 'd' {{exampleFilter.Date | date:'d'}}
Date (Hours in 24) data | date: 'HH' {{exampleFilter.Date | date:'HH'}}
Date (Hours in AM/PM) data | date: 'hh' {{exampleFilter.Date | date:'hh'}}
Date (AM/PM character only) data | date: 'a' {{exampleFilter.Date | date:'a'}}
Date (Minute in two digits) data | date: 'mm' {{exampleFilter.Date | date:'mm'}}
Date (minute in one digit) data | date: 'dd' {{exampleFilter.Date | date:'dd'}}
Date (Second in two digits) data | date: 'ss' {{exampleFilter.Date | date:'ss'}}
Date (Second in one digit) data | date: 's' {{exampleFilter.Date | date:'s'}}
Date (Second in millisecond) data | date: '.sss' {{exampleFilter.Date | date:'.sss'}}
Date (Timezone offset) data | date: 'Z' {{exampleFilter.Date | date:'Z'}}
Array filter data | filter: 'AngularJS' {{exampleFilter.ArrayData | filter:'AngularJS'}}
Comments
kapil gupta
Commented on: 27 Jul, 2017 04:10:27 PM
i really enjoying your articles and It's very helpful for naive like me. The way you have written the concepts quite easy. I am and other developers also waiting your new articles.
andy
Commented on: 27 Jul, 2017 04:52:55 PM
Thanks for the feedback Kapil. I have been so busy for those couple months. I will try add more articles on the site :-)
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.