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.