Filters in AngularJS is either used for filtering data from a source or for converting one type into another type while displaying data to the users. We must use a pipe [|] character along with expression and AngularJS supported filter as show below.

Syntax:

Expression | any angularJS supported filter.

Types of filters in AngularJS:

Filter namePurpose
FilterSelects a subset of items present in an array and returns it as a new array.
CurrencyConverts a number into a currency value. When no curreny symbol is specified, then current locale symbol is considered by default.
NumberConverts number to a text.
DateConverts given date into string format.
JsonConverts java script object into a string.
lowercaseConverts a string into lower case.
uppercaseConverts a string into upper case.
orderByOrders a given array elements in a specified order.

AngularJS filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="salaries=[20000,16000,36000]">
<b>Type a value in text box to see how the sample works ex: type 6 </b><br/>
Search salary: <input type="text" ng-model="salaryfilter"><br>
<br>
<table>
<tr><th>Matched salaries are </th></tr>
<tr ng-repeat="salary in salaries|filter:salaryfilter" >
<td>{{salary}}</td>
</tr>
</table>
</div>
</body>
</html>

AngularJS Currency filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
Type different numbers in text boxes to see varying result.
<br>
Note:you will see $ symbol as default culture.
<div ng-app="" ng-init="productPrice=200;quantity=10">
Price:<input type="text" ng-model="productPrice"><br><br>
Quantity:<input type="text" ng-model="quantity"><br><br>
Total Cost:{{(productPrice*quantity)|currency}}
</div>
</body>
</html>

AngularJS number filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<b>Note:</b> Type a bigger number and observe the output while executing sample.<br>
<div ng-app="" ng-init="age=35">
Your age:<input type="text" ng-model="age"><br><br>
Total Cost:{{age|number}}
</div>
</body>
</html>

AngularJS date filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<b>Note:</b> Type a bigger number and observe the output while executing sample.<br><br>
<div ng-app="" ng-init="number=192030922">
Enter a number:<input type="text" ng-model="number"><br><br>
Date time format in YYYY-MM-dd HH:mm:ss is :{{number|date:'yyyy-MM-dd HH:mm:ss Z'}}<br><br>
Date time in MM/dd/yyyy @ hours:minutes AM Or PM :
{{ number|date:'MM/dd/yyyy @ h:mma'}}
</div>
</body>
</html>

AngularJS lowercase filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<b>Note:</b> Type any name with upper case and lower case characters and observe  
output.<br><br>
<div ng-app="" ng-init="name='SkillGun'">
Company Name:<input type="text" ng-model="name"><br><br>
Company name in lower case :{{name|lowercase}}<br><br>
</div>
</body>
</html>

AngularJS uppercase filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<b>Note:</b> Type  any name with upper case and lower case characters and observe  
output.<br><br>
<div ng-app="" ng-init="name='SkillGun'">
Company Name:<input type="text" ng-model="name"><br><br>
Company name in upper case :{{name|uppercase}}<br><br>
</div>
</body>
</html>

AngularJS orderBy filter example:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<b>Note:</b> Observe the program output. Data is ordered based on name of employee<br><br>
<b>Note:</b> You can order employees data based on designation by replacing <b>orderBy:  
'name'</b>with <b>orderBy: 'designation'</b><br><br>
<div ng-app="" ng-init="employeeDetails=[{name:'giri',designation:'Developer'},
{name:'abishek',designation:'Placement officer'},{name:'nayan',designation:'Counsellor'}]">
<table>
<tr><th>name</th><th>designation</th>
<tr ng-repeat="e in employeeDetails | orderBy: 'name' ">
<td> {{e.name}} </td><td>{{ e.designation }}</td>
</tr>
</table>
</div>
</body>
</html>