python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions