Filters in AngularJS


This article discusses about angularjs filter and demonstrates how to use it, before continuing this article you should have knowledge basic of angularjs, if you dont know visit my previous article where I have demonstrates how to create simple helloworld application using angularjs

Getting Started

Filters are used in angularjs to search, filter and format data. They can be used in view templates, controllers or services. Angular comes with a collection of built-in filters. In view template(HTML) you can use filters with angularjs expression, directives and it customise with your own as well. To apply filters use pipe character(|), the general syntax in templates is as follows:

In Expression

 {{ expression [| filter_name[:parameter_value] ... ] }}  

In Directives

 <li ng-repeat="x in names | [| filter_name[:parameter_value] ... ] ">  
Filter syntax in JavaScript veries depending upen the filter components.


AngulrJS provides following built-in filters
  1. Date:- Format a date to string based on the requested format. For date several formats are available, most used formats are listed below.
    • yyyy:-4 digits year example-1987
    • yy:-2 ditits year example-87
    • MMMM:-January-December
    • MMMJan-Dec
    • MM01-12
    • M1-12(there is no zero leading)
    • dd01-31
    • d1-31(there is no zero leading)
  2. number :-This filter formats number to string, it can be used both in html and javascript.
  3. currency:- Filters a number to string as currency, you can define your own custom currency. When no currency symbol is provided, default symbol for current locale is used.
  4. lowercase:- Converts string to lowercase.
  5. uppercase:- Converts string to uppercase.
  6. filter:- Selects a subset of items from array and returns it as a new array. In my next article we will discuss in details.
  7. limitTo:- Creates a new array or string containing only a specified number of elements. Will discuss in next article
  8. orderBy: Returns an array containing the items from the specified collection, ordered by a comparator function based on the values computed using the expression predicate. We will discuss in details in my upcoming article
  9. json:- Allows you to convert a JavaScript object into JSON string.


This example displays employee data in a table. Each data of employee is formatted using AngularJs filters. It uses most used filters like date, number and currency. In currency filter we have used custom currency symbol that "Rs"(Indian currency symbol).
 <HTML ng-app = "myapp">  
      <TITLE> AngularJS learning(Filters)</TITLE>  
      <script src=""></script>  
           var myapp=angular.module("myapp",[]);  
           $scope.employee={Name:"Kamal",Sex:"Male",DOB:new Date("April 16, 1992"),Salary:48000.5689};  
      <BODY ng-controller="myappcont">  
           <h2>Employee Details</h2>  
           <table border="1">  
                     <th>Format Type</th>  
                     <th>Original Value</th>  
                     <th>Formated Value</th>  
                     <td>Name:</td><td>Upper case</td><td>{{employee.Name}}</td><td>{{employee.Name|uppercase}}</td>  
                     <td>Sex: </td><td>Lower case</td><td>{{employee.Sex}}</td><td>{{employee.Sex|lowercase}}</td>  
                     <td>DOB:</td><td>Date Format</td><td>{{employee.DOB}}</td><td>{{employee.DOB|date:"dd/MM/yyyy"}}</td>  
                     <td>Salary:</td><td>Number Format</td><td>{{employee.Salary}}</td><td>{{employee.Salary|number:3}}</td>  
                     <td>Salary:</td><td>Currency Format</td><td>{{employee.Salary}}</td><td>{{employee.Salary|currency:"Rs.":2}}</td>  


Hope this article my helpful to you, please give comment for improving article.

Kailash Chandra Behera

No comments:

Post a Comment