Angular

Introduction To AngularJS - Day 10

In the 10th day of AngularJS article series, we are going to learning next key players/concept of AngularJS, understanding the concept of custom 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
  9. Introduction to AngularJS – Day 9

Custom Filters

In this article we are going to manipulate data using AngularJS. The AngularJS framework has another useful component i.e. ‘filters’. The AngularJS framework allows us to create custom filters:

  1. //Creating Custom Filter  
  2. app.filter("markCurrentYear", function ()  
  3. {  
  4.     return function (input)  
  5.     {  
  6.         var currentYear = new Date()  
  7.             .getFullYear();  
  8.         if (currentYear == input)  
  9.         {  
  10.             return input + ' ' + '\u2713';  
  11.         }  
  12.         else  
  13.         {  
  14.             return input + ' ' + '\u2718';  
  15.         }  
  16.     };  
  17. });  
The above code shows you how to create a filter with the help of object of module. The following is the way to use filter in HTML element:
  1. <ul ng-repeat="emp in employees">  
  2.     <li> Name : {{ emp.name }}  
  3.         <br /> Year : {{ emp.joinYear | markCurrentYear }}   
  4.     </li>  
  5. </ul>  
The above HTML code shows you how to use created filter with expression. The following is the full code of above example:
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3.   
  4. <head>  
  5.     <title>Custom Filters in AngularJS</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div ng-controller="viewController">  
  11.         <h1>Welcome to C# Corner!</h1>  
  12.         <h3>Creating Custom Filter in AngularJS</h3>  
  13.         <ul ng-repeat="emp in employees">  
  14.             <li> Name : {{ emp.name }}  
  15.                 <br /> Year : {{ emp.joinYear | markCurrentYear }} </li>  
  16.         </ul>  
  17.     </div>  
  18.     <script type="text/javascript">  
  19. //Creating Module  
  20. var app = angular.module("myApp", []);  
  21. //Creating Controller using object of module 'app'  
  22. app.controller("viewController", function ($scope)  
  23. {  
  24.     $scope.employees = [  
  25.     {  
  26.         'name': "Paritosh",  
  27.         'joinYear': 2013  
  28.     },  
  29.     {  
  30.         'name': "Sameer",  
  31.         'joinYear': 2015  
  32.     },  
  33.     {  
  34.         'name': "Prasad",  
  35.         'joinYear': 2014  
  36.     },  
  37.     {  
  38.         'name': "Makarand",  
  39.         'joinYear': 2015  
  40.     }];  
  41. });  
  42. //Creating Custom Filter  
  43. app.filter("markCurrentYear", function ()  
  44. {  
  45.     return function (input)  
  46.     {  
  47.         var currentYear = new Date()  
  48.             .getFullYear();  
  49.         if (currentYear == input)  
  50.         {  
  51.             return input + ' ' + '\u2713';  
  52.         }  
  53.         else  
  54.         {  
  55.             return input + ' ' + '\u2718';  
  56.         }  
  57.     };  
  58. });  
  59.     </script>  
  60. </body>  
  61.   
  62. </html>  
Code

In the above code we have created a module and using that module we have created a custom filter ‘markCurrentYear’ with parameter. We have created list of employees in controller with ‘name’ and ‘joinYear’ property. In created filter we apply on ‘joinYear’, when filter apply ‘joinYear’ comes as input to filter and we check which condition is it, current year or not. Then we add with that input value check mark and cross mark as present or not using there numeric value. See the following output after applying the filter:

joinYear

In the above output you can see if the employee joined in current year then check mark is added otherwise cross mark is added with value.

Great, we learned creating custom filters in AngularJS with example successfully.

Summary

I hope that beginners as well as students understand concept of Custom Filter 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