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

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.