AngularJS Custom Filter

Hello friends !

In this article, we will learn How to create custom filter in AngularJS application ? How to use custom filters in AngularJS View ?

Creating your own filter is very easy. you need to only register a custom filter factory function with your module. Internally, this uses the $filterProvider. This factory function should return a new filter function which takes the input value as the first argument with other optional arguments.

Filters are used to extend the behavior of binding expressions and directives. They are used to format values or to apply certain conditions over binding object properties. They are executed whenever the value bound in the binding expression is updated.

We can create filter as follows ,which will apply Math.ceil method over bindable value.

var ng = angular.module("myApp", []); ng.filter('ceil', function () { return function (i) { return Math.ceil(i); };

We can use this filter as follows.

<span>{{price | ceil}}</span>

The following sample filter reverses a text string. In addition, it conditionally makes the text upper-case.

var ng = angular.module("myApp", []); ng.filter('reverse', function () { return function (input, uppercase) { input = input || ''; var out = ''; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; }; });

Injecting filter in controller.

ng.controller('MyController', ['$scope', 'reverseFilter', function ($scope, reverseFilter) { $scope.greeting = 'SWClass'; $scope.filteredGreeting = reverseFilter($scope.greeting); }]);

Applying filter in view.

<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>     <input ng-model="greeting" type="text"><br>     No filter: {{greeting}}<br>     Reverse: {{greeting|reverse}}<br>     Reverse + uppercase: {{greeting|reverse:true}}<br>     Reverse, filtered in controller: {{filteredGreeting}}<br> </div>

Copy entire code below and run.

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title></title>     <link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />     <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>     <script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>     <script src="angular-1.7.8/angular.min.js"></script> </head> <body>     <div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>         <input ng-model="greeting" type="text"><br>         No filter: {{greeting}}<br>         Reverse: {{greeting|reverse}}<br>         Reverse + uppercase: {{greeting|reverse:true}}<br>         Reverse, filtered in controller: {{filteredGreeting}}<br>     </div>     <script>         var ng = angular.module("myApp", []);         ng.filter('reverse', function () {             return function (input, uppercase) {                 input = input || '';                 var out = '';                 for (var i = 0; i < input.length; i++) {                     out = input.charAt(i) + out;                 }                 // conditional based on optional argument                 if (uppercase) {                     out = out.toUpperCase();                 }                 return out;             };         });         ng.controller('MyController', ['$scope', 'reverseFilter', function ($scope, reverseFilter) {             $scope.greeting = 'hello';             $scope.filteredGreeting = reverseFilter($scope.greeting);         }]);     </script> </body> </html>

If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.


Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.

 
 

{{c.Content}}

Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply


Categories