how to pass an argument to angularjs custom filter

how to pass an argument to AngularJs Custom Filter

Hi everyone, I am going to share the code sample for how to pass an argument to angularjs custom filter

The example as give below. 

Table of context.                  Click for live demo 

1. HTML code sample. 
2. AngularJs code sample. 
3. Full live demo code sample.
1
2
3
4
5
6
7
//HTML for pass an argument to angularjs custom filter.
<div ng-app="customFilterApp" ng-controller="customFilterCtrl">
  <p>My name is {{name}}</p>
  Sum of Ids is (<span ng-bind="items | filterSetup:'id'"></span>) <br>
  Sum of Name is (<span ng-bind="items | filterSetup:'name'"></span>)
</div>
//HTML for pass an argument to angularjs custom filter.

<div ng-app="customFilterApp" ng-controller="customFilterCtrl">
  <p>My name is {{name}}</p>
  Sum of Ids is (<span ng-bind="items | filterSetup:'id'"></span>) <br>
  Sum of Name is (<span ng-bind="items | filterSetup:'name'"></span>)
</div>
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//AngularJs code for pass an argument to angularjs custom filter.
    var cfApp = angular.module('customFilterApp', []);
    cfApp.controller('customFilterCtrl', function($scope) {
      $scope.name = 'Anil';
      $scope.items = [{
        id: 1,
        name: 'S'
      }]
    });
    cfApp.filter('filterSetup', function($log) {
      return function(obj, val) {
           
        var pArray = obj.map(function(obj) {
          return obj[val]
        }), total = 0;
        function sumOf(fst, sec) {
          return fst + sec
        }
           
        return total = pArray.reduce(sumOf, 0);       
      };
    });
//AngularJs code for pass an argument to angularjs custom filter.

    var cfApp = angular.module('customFilterApp', []);

    cfApp.controller('customFilterCtrl', function($scope) {
      $scope.name = 'Anil';
      $scope.items = [{
        id: 1,
        name: 'S'
      }]
    });

    cfApp.filter('filterSetup', function($log) {
      return function(obj, val) {
          
        var pArray = obj.map(function(obj) {
          return obj[val]
        }), total = 0;

        function sumOf(fst, sec) {
          return fst + sec
        }
          
        return total = pArray.reduce(sumOf, 0);        
      };
    });
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//Full demo example code for pass an argument to angularjs custom filter.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>how to pass an argument to angularjs custom filter</title>
  <script>
    var cfApp = angular.module('customFilterApp', []);
    cfApp.controller('customFilterCtrl', function($scope) {
      $scope.name = 'Anil Singh';
       
      $scope.items = [{
        id: 1,
        name: 'Dilip'
      }, {
        id: 2,
        name: 'Upendra'
      }, {
        id: 3,
        name: 'Raju'
      }]
    });
    cfApp.filter('filterSetup', function() {
      return function(obj, val) {
        var total = 0;
        var pArray = obj.map(function(obj) {
          return obj[val]
        });
        function sumOf(fst, sec) {
          return fst + sec
        }
        return total = pArray.reduce(sumOf, 0);
      };
    });
  </script>
</head>
<body ng-app="customFilterApp" ng-controller="customFilterCtrl">
  <p>My name is {{name}}</p>
  Sum of Ids is (<span ng-bind="items | filterSetup:'id'"></span>) <br>
  Sum of Name is (<span ng-bind="items | filterSetup:'name'"></span>)
</body>
</html>
//Full demo example code for pass an argument to angularjs custom filter.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>how to pass an argument to angularjs custom filter</title>
  <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
  <script>
    var cfApp = angular.module('customFilterApp', []);

    cfApp.controller('customFilterCtrl', function($scope) {
      $scope.name = 'Anil Singh';
      
      $scope.items = [{
        id: 1,
        name: 'Dilip'
      }, {
        id: 2,
        name: 'Upendra'
      }, {
        id: 3,
        name: 'Raju'
      }]
    });

    cfApp.filter('filterSetup', function() {
      return function(obj, val) {
        var total = 0;

        var pArray = obj.map(function(obj) {
          return obj[val]
        });

        function sumOf(fst, sec) {
          return fst + sec
        }

        return total = pArray.reduce(sumOf, 0);
      };
    });
  </script>
</head>

<body ng-app="customFilterApp" ng-controller="customFilterCtrl">
  <p>My name is {{name}}</p>
  Sum of Ids is (<span ng-bind="items | filterSetup:'id'"></span>) <br>
  Sum of Name is (<span ng-bind="items | filterSetup:'name'"></span>)
</body>

</html>
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.