Post
Ask Question

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,

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.

Our code

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.

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,

Filters.js

Javascript

Now, just place that filter code in that file.

Filter code

Now, we will add a reference to that.

Path

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

Reference

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.

Output

So, we separated our controller file and Filters File.

Conclusion

So, this was all about Custom Filters in AngularJS.


Similar Articles