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

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, and 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 for Males and for Females 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 filter name 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 were 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 Filters.js and reference the controller File,

Now, just place that filter code in that file.

Now, we will add a reference to that.

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

So, our Final View Code is.

<!DOCTYPE html>
<html>
<head>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/mytest.js"></script>
    <script src="Filters.js"></script>
    <link href="Style.css" rel="stylesheet" />
</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>
    </form>
</body>
</html>

Now, just reload the solution.

So, we separated our controller file and Filters File.

Conclusion

So, this was all about Custom Filters in AngularJS.