Post
Ask Question

Custom Filters In Angular

Introduction

This is the next article of my Angular series, continuing from Angular js from basic to expert -day five. In this article, I am going to explain custom filters in AngularJS and how to create a custom filter. Please find the previous article on built-in filters here.

AngularJS also provides the functionality of creating our own custom filter. We can create our own custom filters by registering the new filter factory function with our module. Please check the previous article for built-in filter in AngularJS here.

$filterProvider is responsible to create a filter function. $filterProvider is factory function and AngularJS internally use $filterProvider to create a filter function.

Creating custom filters is very easy. We only need to register a new filter factory method with our module. As we create the controller using angApp.controller(), the same way, we can create filter using angApp.filter().

  1. var angApp = angular.module('MyERPDemoApp', []);  
  2. angApp.filter('myNewFormat', function(data) { return data});  

AngularJS provides filter methods to create the custom filter. Internally, AngularJS uses the $filterProvider. This factory function returns a new filter function which takes an input value as the first parameter. Any other filter parameters are passed in as an additional parameter into the filter function.

Syntax
  1. var angApp = angular.module('MyERPDemoApp', []);  
  2.  angApp.filter('myNewFormat', function() {  
  3.  return function(datatofilter) {  
  4.  // work on your datatofilter  
  5.  return datatofilter;  
  6.  };  
  7.  });  
  8. HTML:  
  9. {{somedata | myNewFormat }}  

Let's create a custom filter to convert the first letter of the word in upper case. For example, if my name string is written like ‘arvind singh baghel’, it should be Arvind Singh Baghel. (Check comments in the code for details).

  1.  var angApp = angular.module("MyERPDemoApp", []);  
  2.        // creating custom filter to convert first letter of word in upper case  
  3.        // e.g input arvind singh baghel, output: Arvind Singh Baghel  
  4.       // creating custome filter using filter function named myNewFormat  
  5.      angApp.filter('myNewFormat', function()   
  6.      return function(datatofilter) { // datatofilter is input value  
  7.      var res = datatofilter.split(" "); // split input by space in array     
  8.     // e.g input is 'arvind singh' we get 2 item in our res array  
  9.     // loop through the item in array and convert first letter to upper case   
  10.   
  11.      for(var i=0; i < res.length;i++){  
  12.       res[i]= res[i].substr(0,1).toUpperCase()+res[i].substr(1);  
  13.      }  
  14.      // join the array items in single string  
  15.      var fullstring= res.join(" ");  
  16.      return fullstring;  
  17.     };  
  18. });  

In the below example, I will cover all the built-in filters and create a custom filter which will format the first character of every word in upper case. The following details are explained using the comments inside the code.

  1. <!DOCTYPE html>  
  2. <head>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">  
  4. </script>  
  5. <script>  
  6.      var angApp = angular.module("MyERPDemoApp", []);  
  7.        
  8.      // creating custom filter to convert first letter of word in upper case
  9.      // e.g input arvind singh baghel, output: Arvind Singh Baghel
  10.      // creating custome filter using filter function named myNewFormat
  12.      angApp.filter('myNewFormat', function() {  
  13.      return function(datatofilter) {   // datatofilter is input value
  14.      var res = datatofilter.split(" ");   // split input by space in array
  15.      // e.g input is 'arvind singh' we get 2 item in our res array
  16.      // loop through the item in array and convert first letter to upper case
  17.      for(var i=0; i<res.length;i++){  
  18.       res[i]= res[i].substr(0,1).toUpperCase()+res[i].substr(1);  
  19.      }  
  20.      // join the array items in single string using join and return
  21.      return res.join(" ");  
  22.     };  
  23.   });  
  24.     
  25.     //Creating controller with name UserController.  
  26.     angApp.controller('UserController', function($scope) {  
  27.     $scope.welcomenote="Welcome to Angular JS world";  
  28.     $scope.title="Angular JS filter example";  
  29.     $scope.PersonNames = [  
  30.         {name:'arvind singh baghel',DOB:new Date(),country:'India', fee: 100},  
  31.         {name:'tom cruis',DOB:new Date(),country:'united States',fee:null} ,   
  32.         {name:'denial crg',DOB:new Date(),country:'United kingdom',fee:null},  
  33.         {name:'ronaldo',DOB:new Date(),country:'brazil',fee:1000} ,           
  34.         ];  
  35.       
  36.     $scope.orderByThis = function(data) {  
  37.     $scope.customOrderBy = data;        
  38.     }     

  40.    });  
  41.   
  42. </script>  
  43. </head>  
  44. <body ng-app="MyERPDemoApp" ng-controller="UserController">  
  45.   
  46. <!-- uppercase filter -->  
  47. Uppercase Filter : <span ng-bind="welcomenote | uppercase">  </span></br>  
  48. <!-- lowercase filter -->  
  49. lowercase filter : <span> {{ title | lowercase}} </span></br>  
  50.   
  51. <p>Enter Name To Filter : <input type="text" ng-model="name"><p>  
  52. <table border="1" >  
  53. <tr > <td ng-click="orderByThis('name')">Name</td> <td ng-click="orderByThis('DOB')">DOB</td> <td ng-click="orderByThis('country')">Country</td> <td ng-click="orderByThis('fee')">Fee</td>  
  54. </tr>  
  55.        <!-- filter and orderBy filter-->  
  56.     <tr ng-repeat="person in PersonNames | filter:name | orderBy:customOrderBy">  
  57.          <!-- customer myNewFormat filter -->  
  58.         <td>{{person.name | myNewFormat}}</td>  
  59.          <!-- date filter -->  
  60.          <td>{{person.DOB | date:'dd/MM/yyyy'}}</td>  
  61.         <td>{{person.country}}</td>  
  62.          <!-- currency filter -->  
  63.          <td>{{person.fee | currency}}</td>  
  64.     </tr>  
  65. </table>  
  66. </body>  
  67. </html>  

Run this above sample and see the output.

 


Similar Articles