Exploring Filters in {{AngularJS}} Contd. : Custom Filters – Part 14

This post is in continuation of my previous post regarding Filters. (Click here to go to previous post). In last post we discussed about the basics of Angular Filters and found that how easy is to use the predefined filters with examples. This post is also fourteenth post in the series of AngularJS and to see all the previous posts, click here.

In this post, we will be discussing about custom Filter, its uses and create a few custom ones. Also we’ll try to explore some more flavors of the filters. We discussed two main types of Filters in previous post, one that transforms a single item in different format. Another one that can be applied on array of items which produces another array after applying Filter .The resultant array could have same or less number of elements and contain same or transformed data. As we discussed in my earlier posts that Modules in Angular are like containers. It is a top level element and contains all the components of AngularJS. So every custom items must be registered with it. Same is true here as well. Let’s start creating a filter of first type, we already saw some Filters like uppercase, lowercase, currency etc. Now we are going to create a Filter which currently does not exist. It takes a string of numbers and convert into phone number format. Excited?

Let’s start

 	var myangularapp = angular.module('myangularapp', []);
        myangularapp.filter('ConvertoPhone', function () {
            return function (item) {
                var temp = ("" + item).replace(/\D/g, '');
                var temparr = temp.match(/^(\d{3})(\d{3})(\d{4})$/);
                return (!temparr) ? null : "(" + temparr[1] + ") " + temparr[2] + "-" + temparr[3];
            };
        });

Here first we created an Angular module myangularapp. Then added a filter in that module – ConverttoPhone which takes an input parameter and converts that in Phone Number format. Inside the function, normal JavaScript code is written to transform the data. And we have added a custom filter with module. Now its time to use it. Let’s see the HTML first Here we see that ConverttoPhone (red encircled) is used as similar to predefined filters and currently it is applied on a hard-coded value. Lets run that So it just converted the number in US phone number format as we wrote in JavaScript function.

Disclaimer – This code is used to make you understand the concept. It should not be used on production environments as is.

Please note that this filter cannot be applied on arrays or list of data. Let’s create the filter that applies on array of items and there we will also find the reason that why above Filter cannot be applied. So here we are going to create a filter that takes a list of items and removes special characters from each item. Let’s see the JavaScript code

myangularapp.filter('RemoveSpecialCharacters', function () {
    return function (items) {
        var filtered = [];
        for (var i = 0; i &lt; items.length; i++) {
            var item = items[i];
            filtered.push(item.replace(/[^\w\s]/gi, ''));
        }
        return filtered;
    };
});

Here if see that then only difference from above that here the function takes input an array of items that internally iterated and each value is processed accordingly. Now lets see the HTML code Here in 1- we initialized an array textValues with a list of four values which contains special characters.

2- We applied the custom filter RemoveSpecialCharacters as Angular provided filter. Now lets run the code Here we can see that the filtered items returned without any special character. One more point here that we saw in angular filters that there we have the ability to provide some more values to the filer separated by colon (:), how to do that in custom filter. It is very simple, have your custom filter created as So we can add as many parameters as we need and these can be passed via colon (:) similar to pre defined filters.