Creating Custom Filters In AngularJS

In this article, you will learn how to create custom filters in AngularJS.

Overview

In this article, we will see how to create custom filters in AngularJS. In this article, we will see what a custom filter is and how to create a custom filter with an example.

For more articles on AngularJS, kindly refer to,

So, what is a Custom Filter in AngularJS ?

A custom filter is a function that returns a function. We use a filter function to create custom filters.

Now, first we will see a controller. Here, I am adding a field gender and its corresponding values as 1-Male, 2-Female. So, our controller code is:
  1. var mypartone = angular.module("mymodule", []).controller("myController", function($scope)  
  2.                                                           {  
  3.     var employees = [{  
  4.         name: "Akshay",  
  5.         gender: 1,  
  6.         dateOfBirth: new Date("July 21,1960"),  
  7.         Address: "Mumbai",  
  8.         Salary: "1234.34"  
  9.     }, {  
  10.         name: "Milind",  
  11.         gender: 2,  
  12.         dateOfBirth: new Date("July 20,1960"),  
  13.         Address: "Nashik",  
  14.         Salary: "12.34"  
  15.     }, {  
  16.         name: "Raghvan",  
  17.         gender: 1,  
  18.         dateOfBirth: new Date("July 19,1960"),  
  19.         Address: "Pune",  
  20.         Salary: "1235.34"  
  21.     }, {  
  22.         name: "Hari",  
  23.         gender: 1,  
  24.         dateOfBirth: new Date("July 18,1960"),  
  25.         Address: "Mumbai",  
  26.         Salary: "5589.34"  
  27.     }];  
  28.     $scope.employees = employees;  
  29. });  
As you can see from the above code, I have added a gender column and in that, passed it as values. Similarly, I have added a column to our View, as:
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th >  Name   </th>  
  5.             <th>Gender</th>  
  6.              <th  >Date of Birth  </th>  
  7.              <th >Address </th>  
  8.              <th>Salary  </th>   
  9.             
  10.         </tr>  
  11.     </thead>  
  12.     <tbody>  
  13.         <tr ng-repeat="employee in employees">  
  14.                  <td>{{employee.name  }}</td>  
  15.             <td>{{employee.gender}}</td>  
  16.                <td>{{employee.dateOfBirth }}</td>  
  17.                <td>{{employee.Address  }}</td>  
  18.                <td>{{employee.Salary  }}</td>  
  19.   
  20.                 
  21.         </tr>  
  22.   
  23.     </tbody>  
  24. </table>  
Now, let's run our code and see what output we get.

output

We got the corresponding value. Now, we need to convert those to Strings as for Male and for Female respectively.

Now, let's apply a filter.

<td>{{employee.gender|gender}}</td>


Now, let's move back to our controller.

Here, we will add a filter and in that filter we will pass a filtername and function. Inside that function, we will pass an anonymous function that will see the input as gender and we will do a switch case on that. In that, when it's 1, it will return Male and when it is 2, it will return Female.
  1. .filter("gender", function()   
  2. {  
  3.     return function(gender) {  
  4.         switch (gender) {  
  5.             case 1:  
  6.                 return "Male";  
  7.             case 2:  
  8.                 return "Female";  
  9.         }  
  10.     }  
  11. })  
So, our Final controller code is:
  1. var mypartone = angular.module("mymodule", []).filter("gender", function()  
  2. {  
  3.     return function(gender) {  
  4.         switch (gender) {  
  5.             case 1:  
  6.                 return "Male";  
  7.             case 2:  
  8.                 return "Female";  
  9.         }  
  10.     }  
  11. }).controller("myController", function($scope) {  
  12.     var employees = [{  
  13.         name: "Akshay",  
  14.         gender: 1,  
  15.         dateOfBirth: new Date("July 21,1960"),  
  16.         Address: "Mumbai",  
  17.         Salary: "1234.34"  
  18.     }, {  
  19.         name: "Milind",  
  20.         gender: 2,  
  21.         dateOfBirth: new Date("July 20,1960"),  
  22.         Address: "Nashik",  
  23.         Salary: "12.34"  
  24.     }, {  
  25.         name: "Raghvan",  
  26.         gender: 1,  
  27.         dateOfBirth: new Date("July 19,1960"),  
  28.         Address: "Pune",  
  29.         Salary: "1235.34"  
  30.     }, {  
  31.         name: "Hari",  
  32.         gender: 1,  
  33.         dateOfBirth: new Date("July 18,1960"),  
  34.         Address: "Mumbai",  
  35.         Salary: "5589.34"  
  36.     }];  
  37.     $scope.employees = employees;  
  38. });  
Now, let's reload the page.

output

As you can see the corresponding values got displayed according to their respective values, Male and Female.

Now, in some code, the Controllers and the filters are separate files. We will separate this filter and reference that in our View.

So, right click on the solution and add a JavaScript file. Name it as Filters.js and reference the controller File,

code

javascript

Now, just place that filter code in that file:

code

Now, we will add reference to that.

code

Now, just add reference of Filters.js to our View File.

reference
So, our Final View Code is.
  1.    <script src="Scripts/angular.js"></script>  
  2.   
  3.     <script src="Scripts/mytest.js"></script>  
  4.     <link href="Style.css" rel="stylesheet" />  
  5.     <script src="Filters.js"></script>  
  6.   
  7.   
  8. </head>  
  9. <body ng-controller="myController" >  
  10.     <form id="form1" runat="server">  
  11.     <div >        
  12.   
  13. <table>  
  14.     <thead>  
  15.         <tr>  
  16.             <th >  Name   </th>  
  17.             <th>Gender</th>  
  18.              <th  >Date of Birth  </th>  
  19.              <th >Address </th>  
  20.              <th>Salary  </th>   
  21.             
  22.         </tr>  
  23.     </thead>  
  24.     <tbody>  
  25.         <tr ng-repeat="employee in employees">  
  26.                  <td>{{employee.name  }}</td>  
  27.                 <td>{{employee.gender|gender}}</td>  
  28.                <td>{{employee.dateOfBirth }}</td>  
  29.                <td>{{employee.Address  }}</td>  
  30.                <td>{{employee.Salary  }}</td>  
  31.   
  32.                 
  33.         </tr>  
  34.   
  35.     </tbody>  
  36. </table>  
  37.          
  38.     
  39.   
  40.         </div>  
Now, just reload the solution.

output
So, we had separated our controller file and Filters File .

Conclusion: So, this was all about Custom Filters in AngularJS.