Angular

Introduction To AngularJS – Day 9

In the 9th day of AngularJS article series, we are going to learn next key players/concept of AngularJS, understanding the concept of Filters in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8

Filters

In this article we are going to manipulate data using AngularJS. The AngularJS framework has another useful component ‘filters’. The following are the remaining built in filters in AngularJS:

  1. Date

    The date filter is one of the most useful filter of the framework. Generally, a date value comes from the database or any other source in a raw and generic format. We can use this filter by declaring it inside any expression.

    In the following example, we have used the filter on a date variable attached to the scope:
    1. {  
    2.     {  
    3.         emp.joinDate | date  
    4.     }  
    5. }  
    The following code is before applying the filter on date:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="myApp">  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <divng-controller="viewController">  
    12.             <h1>Welcome to C# Corner!</h1>  
    13.             <h3>List Of Employees</h3>  
    14.             <ol>  
    15.                 <li><b>Name :</b>{{employees[0].name}}  
    16.                     <br/><b>Join Date :</b>{{employees[0].joinDate}}  
    17.                     <br/>  
    18.                 </li>  
    19.                 <br/>  
    20.                 <li><b>Name :</b>{{employees[1].name}}  
    21.                     <br/><b>Join Date :</b>{{employees[1].joinDate}}  
    22.                     <br/>  
    23.                 </li>  
    24.                 <br/>  
    25.                 <li><b>Name :</b>{{employees[2].name}}  
    26.                     <br/><b>Join Date :</b>{{employees[2].joinDate}}  
    27.                     <br/>  
    28.                 </li>  
    29.                 <br/>  
    30.                 <li><b>Name :</b>{{employees[3].name}}  
    31.                     <br/><b>Join Date :</b>{{employees[3].joinDate}}  
    32.                     <br/>  
    33.                 </li>  
    34.             </ol>  
    35.             </div>  
    36.             <scripttype="text/javascript">  
    37.                 //Creating Module var app = angular.module("myApp", []); //Creating Controller using object of module 'app' app.controller("viewController", function ($scope) { $scope.employees = [ { 'name': "Paritosh", 'joinDate': new Date() }, { 'name': "Sameer", 'joinDate': new Date() }, { 'name': "Prasad", 'joinDate': new Date() }, { 'name': "Makarand", 'joinDate': new Date() } ]; });  
    38.                 </script>  
    39.     </body>  
    40.   
    41.     </html>  
    After execution of above code you can see output like the following without applying the date filter on joinDate:

    joinDate
    After applying the various ways of date filter, output like the following:

    output

    output
    In the above output you can see various ways with default date directly accessed i.e. first one. The following is the complete code of above example:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="myApp">  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <divng-controller="viewController">  
    12.             <h1>Welcome to C# Corner!</h1>  
    13.             <h3>List Of Employees</h3>  
    14.             <ol>  
    15.                 <li><b>Name :</b>{{employees[0].name}}  
    16.                     <br/>  
    17.                     <b>Join Date :</b>{{employees[0].joinDate}}</li>  
    18.                 <br/>  
    19.                 <li><b>Name :</b>{{employees[1].name}}  
    20.                     <br/>  
    21.                     <b>Join Date :</b>{{employees[1].joinDate|date}}</li>  
    22.                 <br/>  
    23.                 <li><b>Name :</b>{{employees[2].name}}  
    24.                     <br/>  
    25.                     <b>Join Date :</b>{{employees[2].joinDate|date:'medium'}}</li>  
    26.                 <br/>  
    27.                 <li><b>Name :</b>{{employees[3].name}}  
    28.                     <br/>  
    29.                     <b>Join Date :</b>{{employees[3].joinDate|date:'MMMMdd/MM/yyyyHH:mm:ss'}}</li>  
    30.             </ol>  
    31.             </div>  
    32.             <scripttype="text/javascript">  
    33.                 //Creating Module var app = angular.module("myApp", []); //Creating Controller using object of module 'app' app.controller("viewController", function ($scope) { $scope.employees = [ { 'name': "Paritosh", 'joinDate': new Date() }, { 'name': "Sameer", 'joinDate': new Date() }, { 'name': "Prasad", 'joinDate': new Date() }, { 'name': "Makarand", 'joinDate': new Date() } ]; });  
    34.                 </script>  
    35.     </body>  
    36.   
    37.     </html>  
  2. JSON

    This json filter is mostly used for debugging purposes. It might be necessary to display the contents of an object in the JSON format. JSON, also known as JavaScript ObjectNotation, is a lightweight data interchange format. It display data on view in jsonn format. Here's how to use this filter:
    1. {  
    2.     {  
    3.         employee | json  
    4.     }  
    5. }  
    The following is the example of how to use json filter in expression:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="myApp">  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <divng-controller="viewController">  
    12.             <h1>Welcome to C# Corner!</h1>  
    13.             <h3>List Of Employees</h3>  
    14.             <ulng-repeat="emp in employees">  
    15.                 <li>{{emp|json}}</li>  
    16.                 </ul>  
    17.                 </div>  
    18.                 <scripttype="text/javascript">  
    19.                     //Creating Module var app = angular.module("myApp", []); //Creating Controller using object of module 'app' app.controller("viewController", function ($scope) { $scope.employees = [ { 'name': "Paritosh", 'joinDate': new Date() }, { 'name': "Sameer", 'joinDate': new Date() }, { 'name': "Prasad", 'joinDate': new Date() }, { 'name': "Makarand", 'joinDate': new Date() } ]; });  
    20.                  </script>  
    21.     </body>  
    22.   
    23.     </html>  
    Here's the image showing how we use json filter:

    filter

    After executing this code here's the output that shows the following ways,

    output
  3. limitTo

    Sometimes, we need to display text, or even a list of elements, and it might be necessary to limit its size. This filter does exactly that and can be applied to a string or an array.

    The following code is an example where there is a limit to the expression:
    1. {  
    2.     {  
    3.         expression | limitTo: 10  
    4.     }  
    5. }  
    The following code shows you how to use limitTo filter for text or an array:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app>  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <div>  
    12.             <h1>Welcome to C# Corner!</h1>  
    13.             <h3>limitTo filter example</h3>  
    14.             <h2>{{'Jeetendra'|limitTo:4}}</h2>  
    15.         </div>  
    16.     </body>  
    17.   
    18.     </html>  
    See the following screen for how we used limitTo filter in the above example:

    limitTo

    After executing above code you can see the following:

    output
  4. number

    The number filter is used to format a string as a number. Similar to the currency and date filters, the locale can be applied to present the number using the conventions of each location.

    Also, you can use a fraction-size parameter to support the rounding up of the number:
    1. {  
    2.     {  
    3.         250 | number: 2  
    4.     }  
    5. }  
    The following code shows you how to use number filter:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app>  
    3.   
    4.     <head>  
    5.         <title>Filters in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.   
    10.     <body>  
    11.         <div>  
    12.             <h1>Welcome to C# Corner!</h1>  
    13.             <h3>number filter example</h3>  
    14.             <h2>{{250|number:2}}</h2>  
    15.             <h2>{{250.3254|number:2}}</h2>  
    16.             <h2>{{250.1234|number:3}}</h2>  
    17.         </div>  
    18.     </body>  
    19.   
    20.     </html>  
    See the following image, how we use number filter for numbers like decimal points:

    number filter

    The following is the output of above code:

    output

    Great, we learned what is filter in AngularJS and various built in filters in AngularJS with example successfully.

Summary

I hope that beginners as well as students understood the concept of Filters in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.

Thanks for reading. Learn it! Share it.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs