AngularJS custom filter example

Table of Contents

AngularJS tutorial:
- Example:
- Output:

In previous post, we have seen about angularJS inbuilt filter. In this post, we are going to how to create your own filters.

AngularJS tutorial:

Filters are used to format data in desired way.
For creating a filter , you need to attach it with the module.


angular.module('myApp')
  .filter('customFilter', function () {
    return function (input) {
      if (input) {
        return input;
      }
    };
  });

angular.module('myApp')

.filter('customFilter', function () {

return function (input) {

if (input) {

return input;

}

};

});

Lets take example where we will convert string to upper case and replace “_” by space(” “).

Example:

Copy below text , open notepad , paste it and save it as angularJSCustomFilterExample.html and open it in the browser.


<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
 <script>
   var app = angular.module('myApp', []);
app.controller('java2blogContoller', function($scope) {
    $scope.java2blogMsg = "Hello_from_Java2blog";   
}).filter('java2blogFilter',function(){
 return function( str ) {
      return str.toUpperCase().replace(/_/g,' ');
   }
});
  </script>
  
  
<div ng-app="myApp" ng-controller="java2blogContoller">    
   
  {{java2blogMsg|java2blogFilter}}   !!!  
</div>

<title>Angular js</title>

var app = angular.module('myApp', []);

app.controller('java2blogContoller', function($scope) {

$scope.java2blogMsg = "Hello_from_Java2blog";

}).filter('java2blogFilter',function(){

return function( str ) {

return str.toUpperCase().replace(/_/g,' ');

}

});

</script>

{{java2blogMsg|java2blogFilter}} !!!

</div>

Output:

HELLO FROM JAVA2BLOG !!!

Was this post helpful?

Let us know if this post was helpful. Feedbacks are monitored on daily basis. Please do provide feedback as that\'s the only way to improve.

AngularJS custom filter example