Create custom filters in angularjs

Rakesh Sharma      No Comments  

How to create custom filters in angularjs with example

Create custom filters in angularjs

In angularjs there are many built-in filters which make your work easy. But sometime need to create custom filters in angularjs which is not in built-in filters.

What is filters in angularjs :- A filter helps you to formats the value of an expression for display to the user. You can use filter in view templates, controllers or services.

Use filters in view templates :- use below syntax in your view to apply filter.

{{ expression | filter }}

you can pass arguments using filter like:-

{{ expression | filter:argument1:argument2:... }}

Use filters in controllers :- use below syntax in your controller to apply filter.

$filter('filterName')(field name where to apply)
//example
$filter('upper')($scope.name)

Above are syntax to use filters in view, controllers etc. Now let’s create some examples how to create custom filters in angularjs.

Custom filters in angularjs example :-

We are going to build a custom filter that check valid image. We are using regular expression to check image extension and return image else string.

Understand code:-

Just add .filter() to your angular app to create a filter.

app.filter('filterName', function(){}) 
<div ng-bind-html="name | ifImage"></div>

We are applying filter ifImage to this element. and then we need to create a new custom filter ifImage

app.filter("ifImage" , function(){
  return function(val){
    // regex to check image extension.
    var find = new RegExp("(.png|.jpg|.jpeg)$");
    var data = val;
    // Return value if true
    if(find.test(val))
      return data ='<img src="'+val+'">';
    else
      return data ="Not a valid image";
   };
 });

So we are creating a new filter ifImage which return image with checking regex. and passing input value in function(val)

Use custom filter in controller angularjs :-

Now we will be look how to use custom filter in controller with the help of an example. Now we are creating a controller and filter that change our given text to uppercase on button click.

See the Pen use Custom filters in controller angularJS by rakesh (@rakeshsharma) on CodePen.

Understand code:-
intialize controller.

<div class="container" ng-app="filterApp" ng-controller="filterCtrl">

calling our controller function on button click.

<input type="button" class="btn btn-success" ng-click="goUpper();" value="Make Upper">

Then our angularjs code which calling a function $scope.goUpper and then applying a custom filter upper to make text in upper case using controller.

var app = angular.module('filterApp', []);
  app.filter("upper" , function(){
  return function(val){
   return val.toUpperCase();
   };
 }).controller('filterCtrl', function($scope, $filter){
    $scope.name='rakesh';
    $scope.goUpper = function(){
      // Calling filter.
      var upperVal =  $filter('upper')($scope.name);
      $scope.name = upperVal;
    }
});

So now you can easily create custom filters in angularjs and can use in controller. To understand more about filters follow official docs