Post
Ask Question

Filters In Angular

Introduction

This blog discusses Angularjs filter and demonstrates how to use it.

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 expressions and directives and it customizes with your own as well. To apply filters use pipe character(|), the general syntax in templates is as follows,

In Expression
  1. {{ expression [| filter_name[:parameter_value] ... ] }}
In Directives
  1. <li ng-repeat="x in names | [| filter_name[:parameter_value] ... ] ">
Filter syntax in JavaScript veries depending upen the filter components.

Filters 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.
Example

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). 
  1. <HTML ng-app = "myapp">    
  2.      <TITLE> AngularJS learning(Filters)</TITLE>    
  3.      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>    
  4.      <script>    
  5.           var myapp=angular.module("myapp",[]);    
  6.           myapp.controller("myappcont",function($scope){    
  7.           $scope.employee={Name:"Kamal",Sex:"Male",DOB:new Date("April 16, 1992"),Salary:48000.5689};    
  8.           });    
  9.      </script>    
  10.      <BODY ng-controller="myappcont">    
  11.           <strong>Employee Details</strong>    
  12.           <hr/>    
  13.           <table border="1">    
  14.                <tr>    
  15.                     <th>Property</th>    
  16.                     <th>Format Type</th>    
  17.                     <th>Original Value</th>    
  18.                     <th>Formated Value</th>    
  19.                </tr>    
  20.                <tr>    
  21.                     <td>Name:</td><td>Upper case</td><td>{{employee.Name}}</td><td>{{employee.Name|uppercase}}</td>    
  22.                </tr>    
  23.                <tr>    
  24.                     <td>Sex: </td><td>Lower case</td><td>{{employee.Sex}}</td><td>{{employee.Sex|lowercase}}</td>    
  25.                </tr>    
  26.                <tr>    
  27.                     <td>DOB:</td><td>Date Format</td><td>{{employee.DOB}}</td><td>{{employee.DOB|date:"dd/MM/yyyy"}}</td>    
  28.                </tr>    
  29.                <tr>    
  30.                     <td>Salary:</td><td>Number Format</td><td>{{employee.Salary}}</td><td>{{employee.Salary|number:3}}</td>    
  31.                </tr>    
  32.                <tr>    
  33.                     <td>Salary:</td><td>Currency Format</td><td>{{employee.Salary}}</td><td>{{employee.Salary|currency:"Rs.":2}}</td>    
  34.                </tr>    
  35.           </table>    
  36.      </BODY>    
  37. </HTML>    
Next Recommended Reading Angular 7 Table Reusable Filter Pipe