Post
Ask Question

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! 


Similar Articles