Different Filters in AngularJS
In AngularJS, filters are used to format the data. We can define the filter using the pipe (|) symbol. The syntax of the filter us “Value | Filter”. Today we discuss various filters available in AngularJS.
Lowercase Filter: Lowercase filter used to convert all text to lower case. For example, we can display user entered text in lower case irrespective of whether the user enters text in upper or lower case by using “Value | lowercase” syntax as shown below.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="text" ng-model="Name" placeholder="Enter your name" /> <h1> Hi <span ng-bind="Name | lowercase"></span></h1> </body> </html>
As shown above, we are binding model “Name” to span HTML element by applying the lowercase filter.
Uppercase Filter: Like lowercase filter, we can convert text to upper case using the uppercase filter as below.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="text" ng-model="Name" placeholder="Enter your name" /> <h1> Hi <span ng-bind="Name | uppercase"></span></h1> </body> </html>
Currency Filter: Currency filter is used to display the value with a specific currency based on user browser settings.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="text" ng-model="Name" placeholder="Enter value" /> <h1> <span ng-bind="Name | currency"></span></h1> </body> </html>
OrderBy Filter: OrderBy filter is used to sort the values either in ascending or descending order. To display values in ascending order, use “Value | orderBy:’Value’” syntax and we can use “Value | orderBy:’-Value’” syntax to display values in descending order.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular.min.js"> </script>
</head>
<body>
<div ng-app ng-init="EmploySalaries=[{Name:'Raj', Salary:3000}, {Name:'Dave', Salary:4500},
{Name:'John', Salary:5000}, {Name:'Martin', Salary:2000},
{Name:'Mark', Salary:6000}]">
<div><b>Employee Data in Salary Ascending Order</b></div>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in EmploySalaries | orderBy:'Salary'">
<td ng-bind="emp.Name"></td>
<td ng-bind="emp.Salary"></td>
</tr>
</table>
<br />
<div><b>Employee Data in Salary Descending Order</b></div>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in EmploySalaries | orderBy:'-Salary'">
<td ng-bind="emp.Name"></td>
<td ng-bind="emp.Salary"></td>
</tr>
</table>
</div>
</body>
</html>
As shown in the above code, we have initialized the EmployeeSalaries array with Name & Salary values. Then we are displaying data in both ascending and descending orders based on Salary by using ng-repeat="emp in EmploySalaries | orderBy:'Salary'" and ng-repeat="emp in EmploySalaries | orderBy:'-Salary'"
Array Filter: By using array filter, we can filter the array data based on input using “Array | filter:input” syntax.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular.min.js"> </script>
</head>
<body>
<div ng-app ng-init="EmploySalaries=[{Name:'Raj', Salary:3000}, {Name:'Dave', Salary:4500},
{Name:'John', Salary:5000}, {Name:'Martin', Salary:3000},
{Name:'Mark', Salary:6000}]">
<div><b>Employee Data in whose salary is 3000</b></div>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in EmploySalaries | filter:3000">
<td ng-bind="emp.Name"></td>
<td ng-bind="emp.Salary"></td>
</tr>
</table>
</body>
</html>
