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.
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>