Angularjs filter is one of the great features of angularjs. One day, you may need to use a custom filter, and luckily, you found this blog post.
The following shows what the custom filter looks like (note myfilter):
Our custom filter is called "myfilter", which has 4 parameters separated by ':'.
Here is a sample input that will be used:
$ = [{name:'John', phone:'555-1276'},
{name:'Annie', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'David', phone:'555-8765'},
{name:'Mikay', phone:'555-5678'}];
The filter only displays items containing "555" in the phone number, which is the sample output:
Name Phone John 555-1276 Mike 555-4321 Adam 555-5678 David 555-8765 Mikay 555-5678
The processing flow of filtering "555" is executed by "windowScopedFilter", which is the fourth parameter of the filter 'myfilter'.
Let's implement these functions (add logging to each input parameter):
var myapp = ('MyFilterApp', []);
('myfilter', function() {
return function(input, param1) {
("------------------------------------------------- begin dump of custom parameters");
("input=",input);
("param1(string)=", param1);
var args = (arguments);
("arguments=", );
if (3<=) {
("param2(string)=", args[2]);
}
if (4<=) {
("param3(bool)=", args[3]);
}
("------------------------------------------------- end dump of custom parameters");
// filter
if (5<=) {
return window[args[4]](input);
}
return input;
};
});
Most of the above codes are logged (Translator's note: display information to the console). The most important part of actually completing the filtering is:
// filter
if (5<=) {
return window[args[4]](input);
}
return input;
"return window[args[4]](input)" calls the fourth parameter, which is 'windowScopedFilter'.
Here is the console output:
"------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21 "input=" [object Array] custom_filter_function.html:22 "param1(string)=" "param1" custom_filter_function.html:23 "arguments=" 5 custom_filter_function.html:25 "param2(string)=" "param2" custom_filter_function.html:27 "param3(bool)=" true custom_filter_function.html:30 "------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32 "------------------------------------------------- begin dump of custom parameters" custom_filter_function.html:21 "input=" [object Array] custom_filter_function.html:22 "param1(string)=" "param1" custom_filter_function.html:23 "arguments=" 5 custom_filter_function.html:25 "param2(string)=" "param2" custom_filter_function.html:27 "param3(bool)=" true custom_filter_function.html:30 "------------------------------------------------- end dump of custom parameters" custom_filter_function.html:32
Complete code:
<html>
<head>
<script src=""></script>
<script type="text/javascript">
function windowScopedFilter (input) {
var output = [];
(input, function(v,k){
if (("555")) {
(v);
}
});
return output;
}
var myapp = ('MyFilterApp', []);
('myfilter', function() {
return function(input, param1) {
("------------------------------------------------- begin dump of custom parameters");
("input=",input);
("param1(string)=", param1);
var args = (arguments);
("arguments=", );
if (3<=) {
("param2(string)=", args[2]);
}
if (4<=) {
("param3(bool)=", args[3]);
}
("------------------------------------------------- end dump of custom parameters");
// filter
if (5<=) {
return window[args[4]](input);
}
return input;
};
});
('MyFilterController', ['$scope', function($scope) {
$ = [{name:'John', phone:'555-1276'},
{name:'Annie', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'David', phone:'555-8765'},
{name:'Mikay', phone:'555-5678'}];
}]);
</script>
</head>
<body ng-app="MyFilterApp">
<div ng-controller="MyFilterController">
<table >
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'">
<td>{{}}</td>
<td>{{}}</td>
</tr>
</table>
</div>
<hr>
</body>
</html>