Let us explore the built-in filters available in AngularJS with live demonstration. I had already explained about directives, module...

Let us explore the built-in filters available in AngularJS with live demonstration. I had already explained about directives, modules, controllers and two way data binding in my previous articles in this tutorial series. Next, let us travel through the concept of filters by visualizing a set of built in filters available in AngularJS with a simple live demonstration showcase.

AngularJS filters are used to format the model data for display in the view. For example if you have to display measurement value both in metrics(US) and imperial(UK) format and the model has values only in imperial format, then you may create a custom filter to format the data when it is displayed. Another real time usage scenario may be in cases where you need to display localized data.

Filters can be applied to an expression name followed by "|" symbol. You can apply multiple filters to the same expression.

name | lowercase

AngularJS provides 9 built-in filters. Let us explore each one of it with a simple demonstration.

DEMO

<!DOCTYPE html>
<html ng-app="filterModule">
<head>
<script type="text/javascript"
  src="lib/angularjs.min.js"></script>
</head>
<body>
<div ng-controller="FilterController">
<h4>orderBy Filter</h4>
 <div class="filterDemos">
  <table>
   <thead>
   <th>Name</th>
   <th>Designation</th>
   </thead>
   <tbody>
   <tr ng-repeat="employee in employees | orderBy:'name'">
   <td>{{employee.name}}</td>
   <td>{{employee.designation}}</td>
   </tr>
   </tbody>
  </table>
 </div>
<h4>limitTo Filter</h4>
        <div class="filterDemos">
  <table>
   <thead>
   <th>Name</th>
   <th>Designation</th>
   </thead>
   <tbody>
   <tr ng-repeat="employee in employees | limitTo:5">
   <td>{{employee.name}}</td>
   <td>{{employee.designation}}</td>
   </tr>
   </tbody>
  </table>
 </div>
<h4>lowercase and uppercase Filter</h4>
        <div class="filterDemos">
  <table class="table table-hover table-bordered table-striped">
  <thead>
  <th>Name</th>
  <th>Designation</th>
  </thead>
  <tbody>
  <tr ng-repeat="employee in employees">
  <td>{{employee.name | uppercase}}</td>
  <td>{{employee.designation | lowercase}}</td>
  </tr>
  </tbody>
  </table>
  <img src="img/angularjs_filters_3.png"/>
  <br/>
 </div>
<h4>search Filter</h4>  
 <div class="filterDemos">
  <p>Search: <input type="text" ng-model="searchText"/></p>
  <table>
   <thead>
   <th>Name</th>
   <th>Designation</th>
   </thead>
   <tbody>
   <tr ng-repeat="employee in employees | filter:searchText">
   <td>{{employee.name}}</td>
   <td>{{employee.designation}}</td>
   </tr>
   </tbody>
  </table> 
 </div>
<h4>currency Filter</h4>
 <div class="filterDemos">
  <p>Enter Amount: <input type="text" ng-model="amount"/></p>  
  <p>Amount with default currency <span style="color:red">{{amount | currency}}</span></p>
  <p>Amount with Indian currency <span style="color:red">{{amount | currency: "Rs."}}</span></p>
 </div>
<h4>number Filter</h4>      
 <div class="filterDemos" style="text-align:center">
  <p>Enter Number: <input type="text" ng-model="number"/></p>
  <h5>Rounded number with no decimal places: <span style="color:red">{{number | number:0}}</span></h5>
  <h5>Number with 4 decimal places <span style="color:red">{{number | number:4}}</span></h5>
 </div>
<h4>date Filter</h4>
    <div class="filterDemos">
  <h5>Format equivalent to 'M/d/yy h:mm a' for en_US locale  <span style="color:red">{{ 1288323623006 | date:'short'}}</span></h5>
  <h5>Format equivalent to 'MM/dd/yyyy @ h:mma' <span style="color:red">{{ 1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span></h5>
 </div>     
</div>
<script type="text/javascript">
 var filterModule = angular.module('filterModule', []);
    filterModule.controller('FilterController', function($scope) {
  $scope.amount='100';
  $scope.number='1234.5678';
  $scope.employees=[{ name:'Priya',designation:'Manager'},
                    { name:'Naveen',designation:'Tester'},
        { name:'Anita',designation:'Programmer'},
        { name:'Mike',designation:'BA'},
        { name:'John',designation:'Admin'},
        { name:'Alice',designation:'Tester'},
                    { name:'Gracia',designation:'Senior Manager'}];
    });
</script>
</body>
</html>

We have a model with employee details and we have used angularjs filters to format the data being displayed in the view.

orderBy

orderBy filter can be used to sort an array of items.

<!-- To sort in ascending order -->
<tr ng-repeat="employee in employees | orderBy:'name'">
<!-- To sort in descending order -->
<tr ng-repeat="employee in employees | orderBy:'name':true">

limitTo

limitTo filter can be used to limit the number of items to be displayed in an array of items.

<tr ng-repeat="employee in employees | limitTo:5">

lowercase & uppercase

Transforms text to lowercase or uppercase.

<tr ng-repeat="employee in employees">
  <td>{{employee.name | uppercase}}</td>
  <td>{{employee.designation | lowercase}}</td>
</tr>

filter

Enables search through an array of items.

<input type="text" ng-model="searchText"/>
<tr ng-repeat="employee in employees | filter:searchText">

currency

Adds currency symbol to a given number. When no currency symbol is provided, the default symbol for current locale is used.

<span>{{amount | currency}}</span>
<span>{{amount | currency: "Rs."}}</span>

number

This can be used to format number values - rounds a decimal number, makes it a negative number, fix number of decimal places to display.

<h5>Rounded number with no decimal places: {{number | number:0}}</h5>
<h5>Number with 4 decimal places :{{number | number:4}}</h5>

date

Formats date in various formats. You can find various date formats here.

<h5>Format equivalent to 'M/d/yy h:mm a' for en_US locale{{ 1288323623006 | date:'short'}}</h5>
<h5>Format equivalent to 'MM/dd/yyyy @ h:mma'{{ 1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</h5>

json

Converts javascript objects to json.

<pre>{{ {'name':'value'} | json }}</pre>

Output

{ "name": "value" }

Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!

Subscribe to GET LATEST ARTICLES!

Anil Singh26 March 2015 at 00:45
Awesome post
Magistral6999 February 2022 at 20:32
In programming-free website, they are talking with several kinds of issues of programming which is a part of the technology. In addition, technology has improved our quality of life. It helps us with IPTV m3u in the entertainment industry, and the best part is that we don't have to deal with cable system problems. And you can enjoy your favorite show from anywhere in the world.