AngularJS is one of the hottest technologies currently in market. Every web project built on any platform whether .NET, JAVA, PHP or any other, all are just embracing it. It is because the kind of power, flexibility, openness and many other awesome features provided by AngularJS. But I would say even we are using this framework in most of our web applications, but we are not leveraging the real power of of many features. In this post, I am going to discuss about Filters and how to get best out of it.

This post is again in the series of Posts of AngularJS and it is thirteenth in the list. To go though the previous posts in the series, click here.

Filters is one of key features provided by AngularJS and almost used in every web application. In this post, we will be exploring it with bunch of examples. We’ll start from basics then dig deep and create our own custom filter at the end.

What is Filter

Filter as the name suggests, filters the data that gets passed via it. In a simple sentence, it takes an array of items as input and filter it which results to another array of data with same or less number of items and in same or other transformed format. JavaScript also provides us capability to filter the data so let’s take a look on it then start with Angular Filter.  If we want to filter the data what should be required.

1- An array of data

2- A comparator which return true of false. It takes each element if comparator returns true then add in resultant array else leave that element.

In JavaScript, comparator takes three input parameters – Value of the element, index of the element, the array being traversed and returns true or false. We can also pass some more parameters based on our requirement and have our own custom logic.

So lets have a look on JavaScript filter. In this example, I have just provided comparator which checks whether the passed value is even or odd. The syntax of JavaScript filter is as

arr.filter(callback[, thisArg])

Here callback takes three arguments:

  1-  the value of the element
  2-  the index of the element
  3- the Array object being traversed

Let’s see an example. Here I am providing a comparator which returns true in case of even numbers.

function IsEven(element, index, array) {
    // Not using input parameters like index and array
    return (element %2 == 0);
}

var filtered = [530, 3, 8, 112, 11, 240, 43].filter(IsEven);

document.write("Filtered Value : " + filtered);

The above code is self explanatory. Here I created a comparator which returns true or false based on the condition and provided that in the filter. It returns – 530,8,112,240.

Note – This feature is of ECMA-262 standard and wont work on the which supports prior version.

Now we have understood the basics of filter and similar feature available with JavaScript. Let’s move to AngularJS.

Filters in AngularJS

As AngularJS provides us more power to do thing with less and simpler code, the same applies here as well. Let’s start exploring the filters and its uses.

Angular provides a very simple way to use a Filter. We need to provide a filter expression separated by pipe ( | ) and we can add many filters in one go, just by separating with pipe. Filters can be used as two ways in AngularJS

1- Take an item and transform on another format. Ex – uppercase, lowercase, currency, date .

2- Filters an array which results another array with same or transformed data as discussed earlier.

Filter of type 1 (Single item)-

We will see both in this post via an example and start from first one. Lets look at the code

I have put some numbers in green and let’s discuss accordingly.

1- An input box to enter first name with Angular model firstName.

2- An input box to enter first name with Angular model lastName.

3- Here firstName that is entered in textbox is displayed with Filter uppercase which converts the text in uppercase, no matter in which case it is entered by user.

4- Here lastName that is entered in textbox is displayed with Filter lowercase which converts the text in lowercase, no matter in which case it entered by user.

5- Prize money is hard-coded here and currency Filter is applied.

Now lets see it running Here we can see that it is running as expected. First name is in upper case while last name is in lower case and Prize money transformed in currency format.

Filter of type 2 (An array of items)-

Let’s look the filter that applies while displaying list of data. So the code looks like

Here I have initialized some data then used that later for the demo. Let’s discuss each number mentioned in above code as earlier.

1- Initializing an array named courses which a list of course via ng-init.

2- Using ng-repeat to display all the items in array in tabular format.

3- Applied an order by attribute on the property name. Here name is provided in single commas as a value because Angular search that string in the items in provided array. Also there is one more value provided true, what is the use of that. Lets see the syntax of this filter

{{ orderBy_expression | orderBy : expression : reverse}}

So here the last item is reverse so if it true the items would be sorted in descending order else ascending order. And here we have set it is as true so it should be in descending order.

Now lets run that and see the output

So here we can see the items is sorted in descending order based on the course name as expected. Let’s see one more exampleHere I added search input and applied filter using that

1- Textbox to enter the search text.

2- Here I added a filter (named as filter) on the entered value in text box with model name searchText.

3- One more filter orderBy added as earlier example. it means here we have applied two filters and that is totally correct. We can apply as many filter as we want by separating via pipe (|). lets run that Here W is entered in textbox and two rows shown which contained this characters. And you can observe that ordering is also working based on the filters provided.

So we can see that applying filter is very easy in Angular and it provides us a powerful way to display the data. In next post, we will discuss about writing custom Filters and their uses.

Cheers,
Brij

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