Creating Custom Filters In AngularJS

Introduction

AngularJS filters cover many common uses such as formatting dates and currencies, limiting the number of items to be displayed, etc. The filters are helpful to how we may improve the workflow while building Angular apps.

In my previous article, we saw built-in AngularJS filters. We can also write our own custom filter. To create custom filter, we need to just register the filter in factory function in our module. This uses the "filterProvider" internally. By default new filter function takes the input value as the first argument and factory function will return the new filter. We can also pass additional arguments to the filter function.

The filter function should be stateless i.e. it should be pure function. AngularJS execute the filter function based on filter input.

The following are some rules to set the filter name:

• Name with special character (like hyphens and dots) is not allowed.
• If we want to add namespace to filter, we can use capitalization or underscores.
• Filter Name must not be the same as standard AngularJS filters.

AngularJS has built-in method called "filter", which can help us to create custom filter.

Syntax:

app.filter('name of filter', function () {
   return function () {
      return;
   };
});

The returned functions in filter are getting invoked every time when AngularJS call the filter. It means that their is a two-way binding for our filter. When user makes any changes in expression, the filter runs again and updates the data.

Let us take a simple example of creating custom filter that converts our string to upper case. However this filter is already contained by the AngularJS library.

Custom filter

app.filter('toUppercase', function () {
   returnfunction (item) {
      returnitem.toUpperCase();
   };
});

Controller

app.controller("demoController", ['$scope', function ($scope) {
   $scope.myName = "Jignesh Trivedi"
}]);

HTML

<div ng-controller="demoController"style="width:100%">
   <p><b>Custom Filters Example</b></p>
   <div>
      Name : <inputtype="text"ng-model="myName"/>
      <br/>
      Name in Upper Case : {{myName|touppercase}}
   </div>
</div>

Output



Custom Filter example with argument

In this example, custom filter has been created with parameter or argument. Here, I have created filter that is applied on array and returns the array which starts with specific character.

The following is my code for filter, controller and html.

Custom filter

app.filter('startWith', function () {
   returnfunction (items, char) {
      var filtered = [];
      var match = newRegExp(char, 'i');
      for (vari = 0; i<items.length; i++) {
         var item = items[i];
         if (match.test(item.name.substring(0, 1))) {
            filtered.push(item);
         }
      }
      return filtered;
   };
});

Controller

app.controller("demoController", ['$scope', function ($scope) {
$scope.employeeArray = [
    { name: 'Tejas' },
    { name: 'Jignesh' },
    { name: 'Rakesh' },
    { name: 'Nirav' },
    { name: 'Jiten' },
    { name: 'Varun' },
    { name: 'Chirag' }
    ];
    $scope.empName = "j";
}]);

Here, most important thing is where we were passing the argument. We passed  the argument with filter name separated by colon (:).

HTML

<div ng-controller="demoController"style="width:100%">
   <p><b>Custom Filters Example</b></p>
   <p>Search Employee name start with: <inputtype="text"ng-model="empName"/></p>
   <ul>
      <ling-repeat="entry in employeeArray | startWith:empName ">{{entry.name}}</li>
   </ul>
</div>

Output



In the preceding example, filter takes only one argument. We can also create custom filter with multiple arguments.

Filter definition:

app.filter('filterName', function () {
   return function (items, arg0, arg1, arg2, arg3) {
      // To do:
   };
});

HTML:

<ul>
   <li ng-repeat="entry in employeeArray | FilterName:arg0:arg1:arg2:arg3 ">{{entry.name}} </li>
</ul>

Summary

Filters are a very powerful feature in AngularJS for transforming our data, so it easy to scale and reuse. We can also create custom filter base on our requirement.

Hope this will help you.