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 customfilter1-htmlHere 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 customfilterr1So 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 < 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 customfilter-2Here 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 customfilter2-rHere 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 CustomFiltersExSo we can add as many parameters as we need and these can be passed via colon (:) similar to pre defined filters.

Hope you have enjoyed this post. Do let me know if you wan to get added something or have any suggestion.


[18th Aug 2015 : Updated this post for Angular version 1.4.*]

3 thoughts on “Exploring Filters in {{AngularJS}} Contd. : Custom Filters – Part 14

  1. Pingback: Exploring Filters in {{AngularJS}} – Part 13 | Code Wala

  2. Pingback: How to use Angular Filter in Controller, Factory, Service – Part 15 | Code Wala

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s