Creating 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,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS

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:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
                                                          {
    var employees = [{
        name: "Akshay",
        gender: 1,
        dateOfBirth: new Date("July 21,1960"),
        Address: "Mumbai",
        Salary: "1234.34"
    }, {
        name: "Milind",
        gender: 2,
        dateOfBirth: new Date("July 20,1960"),
        Address: "Nashik",
        Salary: "12.34"
    }, {
        name: "Raghvan",
        gender: 1,
        dateOfBirth: new Date("July 19,1960"),
        Address: "Pune",
        Salary: "1235.34"
    }, {
        name: "Hari",
        gender: 1,
        dateOfBirth: new Date("July 18,1960"),
        Address: "Mumbai",
        Salary: "5589.34"
    }];
    $scope.employees = employees;
});

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:

<table>
    <thead>
        <tr>
            <th >  Name   </th>
            <th>Gender</th>
             <th  >Date of Birth  </th>
             <th >Address </th>
             <th>Salary  </th>

        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
                 <td>{{employee.name  }}</td>
            <td>{{employee.gender}}</td>
               <td>{{employee.dateOfBirth }}</td>
               <td>{{employee.Address  }}</td>
               <td>{{employee.Salary  }}</td>


        </tr>

    </tbody>
</table>

Now, let's run our code and see what output we get.



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.

.filter("gender", function()
{
    return function(gender) {
        switch (gender) {
            case 1:
                return "Male";
            case 2:
                return "Female";
        }
    }
})

So, our Final controller code is:

var mypartone = angular.module("mymodule", []).filter("gender", function()
{
    return function(gender) {
        switch (gender) {
            case 1:
                return "Male";
            case 2:
                return "Female";
        }
    }
}).controller("myController", function($scope) {
    var employees = [{
        name: "Akshay",
        gender: 1,
        dateOfBirth: new Date("July 21,1960"),
        Address: "Mumbai",
        Salary: "1234.34"
    }, {
        name: "Milind",
        gender: 2,
        dateOfBirth: new Date("July 20,1960"),
        Address: "Nashik",
        Salary: "12.34"
    }, {
        name: "Raghvan",
        gender: 1,
        dateOfBirth: new Date("July 19,1960"),
        Address: "Pune",
        Salary: "1235.34"
    }, {
        name: "Hari",
        gender: 1,
        dateOfBirth: new Date("July 18,1960"),
        Address: "Mumbai",
        Salary: "5589.34"
    }];
    $scope.employees = employees;
});

Now, let's reload the page.



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,





Now, just place that filter code in that file:



Now, we will add reference to that.



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


So, our Final View Code is.

   <script src="Scripts/angular.js"></script>

    <script src="Scripts/mytest.js"></script>
    <link href="Style.css" rel="stylesheet" />
    <script src="Filters.js"></script>


</head>
<body ng-controller="myController" >
    <form id="form1" runat="server">
    <div >

<table>
    <thead>
        <tr>
            <th >  Name   </th>
            <th>Gender</th>
             <th  >Date of Birth  </th>
             <th >Address </th>
             <th>Salary  </th>

        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
                 <td>{{employee.name  }}</td>
                <td>{{employee.gender|gender}}</td>
               <td>{{employee.dateOfBirth }}</td>
               <td>{{employee.Address  }}</td>
               <td>{{employee.Salary  }}</td>


        </tr>

    </tbody>
</table>



        </div>

Now, just reload the solution.


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

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