Custom Filter in Angular JS

To get start with some built-in filter please click here .

Even though angular provided us built-in filters, Angular JS also allows us to customize the filters
and manipulate the data based on our needs while displaying in view which can be done by the API
provided by the angular.
Angular JS provided us the filter method type of API which can be appended to the module level in angular application module object.

Creation of filter :
It’s very simple to create a filter like we create a module as app.module(), service as app.service(),.,.etc.


So, to create a filter simply we can access the filter() function to our angular app module which makes as like app.filter().

Sample Look :

var myapp = angular.module('myapp', []);
myapp.filter('filtername', function () {
            return function (inputvalue, val1,val2,…) {
                var retvalue;
                //  Filter logic
                return retvalue;
            }
 });

 If we have a look over the above syntax, I had accessed the filter function to the module variable “myapp”. This filter function takes two parameters as follows :

1)      First parameter is Name of the filter (in above script its ‘filtername’).

2)      Second is a function that which returns an anonymous function.

To this anonymous function we need to pass our value that which requires the data formatting. This function also allows us to pass n number of parameters which are optional.

Passing parameters to the filter’s return function :

Let us look an expression that which uses the filter :

{{ deptid | customfilterdeptname }}

In the above expression “depptid” is the scope or model member that goes to the first parameter as input value to the returning anonymous function named “customfilterdeptname”.

For the above expression our filter will be as follows : 

myapp.filter('customfilterdeptname ', function () {

            return function (deptid) {

                var retvalue;

                // Filter logic

                return retvalue;

            }

        });

Now I’m changing the expression as to pass parameters :

{{ deptid | customfilterdeptname : val1 : val2 }}

In the above expression if we observe after the name of filter “customfilterdeptname” we are having colon separated values as “val1” and “val2”. These two are nothing but the values that which we are passing to the arguments declared in the anonymous returning function of filter method.

myapp.filter('customfilterdeptname ', function () {

            return function (inputvalue,val1,val2) {

                var retvalue;

                // Filter logic

                return retvalue;

            }

        });

Example on custom filter :
Let us assume we are having the scope object of departments with properties of department name and loc with its id. As like below :

$scope.departments = [
                    { name: 'Sales', loc: 1 },

                    { name: 'Developer', loc: 2 },

                    { name: 'Tester', loc: 2 },

                    { name: 'Architect', loc: 3 }

            ];

Scope so, our target is to display the above content in table view, but instead of loc as id’s like 1,2 & 3 we need to display their concern names as like below image :

Now, lets achieve the above by using or creating a custom filter named as “customfilterdeptname” like below.

var myapp = angular.module('myapp', []);

        myapp.filter('customfilterdeptname', function () {

            return function (inputvalue) {

                switch (inputvalue) {

                    case 1:

                        return "US";

                    case 2:

                        return "India";

                    default:

                        return "Malaysia"

                }

            }

        });

In the above filter I used the switch case to return the value based on the property “loc” that which assigns to “inputvalue” in the function while calling the filter.  

Controller Code :

myapp.controller('ctrlr', ['$scope', function ($scope) {

            $scope.departments = [

                                { name: 'Sales', loc: 1 },

                               { name: 'Developer', loc: 2 },

                               { name: 'Tester', loc: 2 },

                               { name: 'Architect', loc: 3 }

            ];

        }]);

View code :

<body ng-app="myapp" ng-controller="ctrlr">

    <table>  

    <thead>  

        <tr>

            <th>Department</th> 

            <th>Location</th> 

        </tr>  

    </thead>  

    <tbody>  

        <tr ng-repeat="dept in departments">  

            <td>{{dept.name}}</td>  

            <td>{{dept.loc | customfilterdeptname }}</td> 

        </tr> 

    </tbody>  

</table>  

</body>

    In the above view code within table to the tr tag we have used ng-repeat which is used to loop over all our list of departments object. While looping over the “loc” property it will find the filter  “customfilterdeptname” which we applied. While entering into the filter funnction it treats the “dept.loc” as a input value to our filters returning anonymous function. As per the switch case it returns its concern country and binds that into the td tag where we applied the filter.

Result :