Creating custom filters in AngularJS – 3 Examples

In the previous post we have learnt anatomy of an AngularJS filter and how to use AngularJS’ inbuilt filters. In this post lets understand how to create custom filters.

As part of this post, we will be creating three custom filters.

  1. Ellipsis Filter : Applying this filter on a string would return us a shortened string (word wise) with ellipsis at the end. We can also pass a number that would decide length of the shortened string.
  2. Capitalize Filter: Lets create this filter with a twist. If we apply this filter that takes an optional parameter, it would capitalize the character corresponding to the parameter in a given input string.
  3.  Array Filter: This filter would take an array and filter the data based on the second parameter. For the purpose of this example, we would have an array of employee names and their status. One could filter that array based on the status of an employee.

Ellipsis Filter

When developing applications like Content Management Systems, we often come across scenarios where we may want to display just a part of string and allow the user to click on “More” so we can take them to the detailed page. Ellipsis filter can be handy for such scenarios.

JavaScript

In the above code, we are first checking to see if the passed value is true. If not, we are just returning it back unchanged. Note the other three parameters that we are passing:

  1. wordwise is a Boolean value tells us if we need to shorten the string word wise.
  2. max is a number that tells us the number of words to limit the string to.
  3. tail gives us the string to be concatenated at the tail end of the string.

The following code shows how to apply this filter in your controller.

In Controller

In View

As you can see, you can pass multiple parameters in the view by using a colon (“:”).

Capitalize Filter

JavaScript

As you can notice in the above code, Capitalize filter takes two parameters, input and char. The idea here is to capitalize the character of the input based on the index number provided in the char parameter.

We first check to see if the input is a string and then loop through the characters of the input string to capitalize the correct character. The following code shows how to use this filter in a controller and in a view.

In Controller

In View

Array Filter

In Controller

For this filter we have initialized an array employees with some values and then applied the filter on this array. The returned array is saved into filteredEmployees. This filter takes status as a parameter and returns all the employees with the provided status.

The following link takes you to a Plunker that has all the three examples : http://plnkr.co/edit/6eZt1K?p=preview

Top