Invoke AngularJS Custom Filters from JavaScript

Thursday, July 2, 2015

Invoke AngularJS Custom Filters from JavaScript

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. In the previous posts we have seen on how to create and invoke custom filters from the view, in this post we shall see on how to create custom filters and invoke them from the controller functions in JavaScript.

<html ng-app="custFilter">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
                   var app = angular.module('custFilter', [])
                   .filter('sayHello', function()
                   {
                             return function( input )
                             {
                                      return 'Hello ' + input;
                             }
                   });
                   //
                   app.controller("nameController", function($scope, $filter) {
                       $scope.Name = 'Harry';
                       $scope.HelloName = $filter('sayHello')($scope.Name);
          });
</script>
</head>
<body>
          <div ng-controller="nameController">
                   Name: {{Name}} <br/>
                   Name with Filter: {{HelloName}}
          </div>
</body>
</html>

Output: