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)

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
      return data ='<img src="'+val+'">';
      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.goUpper = function(){
      // Calling filter.
      var upperVal =  $filter('upper')($;
      $ = upperVal;

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