Angular implements the search box and Price upper and lower limits, and angular lower limit

Source: Internet
Author: User

Angular implements the search box and Price upper and lower limits, and angular lower limit

Write a simple angular search box.

1. Requirements:

Use AngularJS framework to implement the mobile product search function. Subject requirements:
1) Search for materials and enrich the data of mobile phone products to at least 10 according to the original data format.
2) self-designed pages, including "search criteria" and "mobile phone information display"
3) when you change any search criteria, You need to display the search results in the "Display Section" in real time.
4) Specific requirements for search conditions:
Search box (fuzzy search by matching the operating system, product name, and manufacturer)
Price range (start price ~ End price)

2. Demand Analysis:

First, we need to render the product to the page.

Secondly, when we enter the text in the search box, products that match the text in the search box are dynamically displayed.

When dynamic refers to the input of one character, the product will be filtered.

Finally, the upper and lower limits of the price are the same principle.

In this way, angular is the most convenient. Angular provides excellent support for bidirectional data.

3. Actual code:

1) HTML code:

<! DOCTYPE html> 

2) JS Code:

Let httpApp = angular. module ('searchapp', []); httpApp. controller ('datactrl', ["$ scope", "$ http", function ($ scope, $ http) {let http = $ http. get ("conf. json "); // simulate the json data obtained from the backend. $ Scope. content = ''; $ scope. $ watch ("content + top + bottom", function () {http. then (// success callback function success (response) {$ scope. datas = response. data; // filter prices. $ Scope. datas = $ scope. datas. filter (function (x, index) {if ($ scope. top === undefined & $ scope. bottom === undefined) {return 1;} else if ($ scope. top === undefined) {return x. price> = $ scope. bottom} else if ($ scope. bottom === undefined) {return x. price <= $ scope. top;} else {return x. price> = $ scope. bottom & x. price <= $ scope. top ;}}); // filter the search content. $ Scope. datas = $ scope. datas. filter (function (x, index) {system = x. system. indexOf ($ scope. content) + 1; name = x. name. indexOf ($ scope. content) + 1; producer = x. producer. indexOf ($ scope. content) + 1; if (system + name + producer >=1) {return 1 ;}else {return 0 ;}}, // error callback function error (response) {console. log (response) ;}) ;}]);

PS: to be lazy, I did not write a nice style. If you need it, you can add it by yourself.

3) conf. json code:

[{"System": "ios", "name": "Apple iPhone 6 s 16 GB rose gold", "price": 4698, "producer": "Apple ", "pic": "01.jpg" },{" system ":" MIUI "," name ":" Xiaomi mobile phone 4 S full Netcom version 2 GB memory 16 GB White "," price ": 1499, "producer": "Xiaomi", "pic": "02.jpg"}, {" system ":" Android "," name ":" Meilan note3 (16 GB) silver full Netcom public edition dual-card Dual standby "," price ": 1099," producer ":" meizu technology "," pic ":" 03.jpg" },{ "system": "ios ", "name": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone", "price": 6587, "producer": "Apple", "pic ": "04.jpg"}, {" system ":" ios "," name ":" Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone "," price ": 6578, "producer": "Apple", "pic": "04.jpg"}, {" system ":" ios "," name ": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom China Telecom 4G mobile phone", "price": 6788, "producer": "Apple", "pic": "04.jpg "}, {"system": "ios", "name": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone", "price": 6878, "producer ": "Apple", "pic": "04.jpg"}, {" system ":" ios "," name ":" Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone ", "price": 6528, "producer": "Apple", "pic": "04.jpg" },{" system ":" ios "," name ": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom China Telecom 4G mobile phone", "price": 6988, "producer": "Apple", "pic": "04.jpg "}, {"system": "ios", "name": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone", "price": 6388, "producer ": "Apple", "pic": "04.jpg"}, {" system ":" ios "," name ":" Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone ", "price": 6378, "producer": "Apple", "pic": "04.jpg" },{" system ":" ios "," name ": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom China Telecom 4G mobile phone", "price": 6738, "producer": "Apple", "pic": "04.jpg "}, {"system": "ios", "name": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone", "price": 6568, "producer ": "Apple", "pic": "04.jpg"}, {" system ":" ios "," name ":" Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone ", "price": 6558, "producer": "Apple", "pic": "04.jpg" },{" system ":" ios "," name ": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom China Telecom 4G mobile phone", "price": 6738, "producer": "Apple", "pic": "04.jpg "}, {"system": "ios", "name": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone", "price": 6428, "producer ": "Apple", "pic": "04.jpg"}, {" system ":" ios "," name ":" Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone ", "price": 652488, "producer": "Apple", "pic": "04.jpg" },{" system ":" ios "," name ": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom China Telecom 4G mobile phone", "price": 654588, "producer": "Apple", "pic": "04.jpg "}, {"system": "ios", "name": "Apple iPhone 6 s Plus 64 GB silver mobile Unicom Telecom 4G mobile phone", "price": 6545645688, "producer ": "Apple", "pic": "04.jpg"}]

PS: simulates the json data transmitted by the server through an object. In addition, images can be added and implemented by yourself.

4. Final question:

Of course, the code I uploaded left a pitfall. How to cancel the limit of the corresponding price range after entering the price and then clearing it.

Finally, you can think about how to optimize the search method as an extension.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

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.