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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.