Ways to create a custom filter using Angularjs

This article mainly describes the use of Angularjs to create a custom filter, Angularjs is a very popular JavaScript library, the need for friends can refer to the

ANGULARJS Filter is one of the great features of Angularjs. One day, you may need to use a custom filter, and fortunately, you have found this blog post.

The following shows what a custom filter looks like (Please note myfilter):

Our custom filter is called "Myfilter", which has 4 parameters separated by ': '.

This is a sample input that will be used:

?

1 2 3 4 5 6

$scope. Friends = [{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 displays only the items in the phone number that contain "555", which is the sample output:

?

1 2 3 4 5 6

Name Phone John 555-1276 Mike 555-4321 Adam 555-5678 David 555-8765 mikay 555-5678

The process of filtering "555" is performed by "Windowscopedfilter", which is the fourth parameter of the filter ' Myfilter '.

Let's implement these functions (add logging to each input parameter):

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21-22

var MyApp = angular.module (' Myfilterapp ', []); Myapp.filter (' Myfilter ', function () {return function (input, param1) {Console.log ("--------------------------------- ----------------begin dump of custom parameters "); Console.log ("input=", input); Console.log ("param1 (String) =", param1); var args = Array.prototype.slice.call (arguments); Console.log ("arguments=", args.length); if (3<=args.length) {Console.log ("param2 (String) =", args[2]);} if (4<=args.length) {Console.log ("param3 (bool) = ", Args[3]);} Console.log ("-------------------------------------------------end dump of custom parameters"); Filter if (5<=args.length) {return window[args[4]] [input];} return input; }; });

Most of the above code is log (note: Display the information to the console). The most important part of actually completing the filter is:

?

1 2 3 4 5

Filter if (5<=args.length) {return window[args[4]] [input];} return input;

"Return window[args[4]" (input) calls the fourth argument, which is ' windowscopedfilter '.

This is the console output:

?

1 2 3 4 5 6 7 8 9/

"-------------------------------------------------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:

?

1 2 3 4 5 6 7 8 9 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 45 46 47 48 49 50 51 52 53 54 55 56 57-58