Ways to create a custom filter using Angularjs

Source: Internet
Author: User
Tags bool

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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.