/ / how to pass an argument to AngularJs Custom Filter
how to pass an argument to angularjs custom filter

how to pass an argument to AngularJs Custom Filter

Edit
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 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>
//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 Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

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