Angular-Search Box and Price Limit
Write a simple angular search box.
1. requirements:
Using Angular JS framework to realize mobile phone product search function, Title requirements:
1) Find the material by oneself and enrich the data of mobile phone products to at least 10 or more according to the original data format.
2) Self-designed pages need to include "search conditions section" and "mobile information display section".
3) When changing any search conditions, the search results need to be displayed in real time in the "display section"
4) Specific requirements of search conditions:
Search box (matching operating system, product name, manufacturer for fuzzy query)
Price Interval (Beginning Price to Ending Price)
2. Demand analysis:
First, we need to render the product onto the page.
Secondly, when we input the text of the search box, we dynamically display the goods that match the text of the search box.
Among them, when we input every character dynamically, we will screen the products.
Finally, the upper and lower limits of prices are the same.
So, in this way, we use angular is the most convenient. Because angular supports bidirectional data very well.
3. Actual code:
1) HTML code:
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <title>AngularJS Page Useing Bootstrap Framework</title>
8 <link rel="stylesheet" href="">
9 <script src="./lib/angular/angular-v1.6.6.js"></script>
10 </head>
11 <body ng-app="searchApp">
12 <div ng-controller="dataCtrl">
13 <input type="text" name="Search box" ng-model="content" placeholder="Please enter the item you want to search for">
14 <input type="text" name="Price cap" ng-model="top" placeholder="Price cap">
15 <input type="text" name="Lower price limit" ng-model="bottom" placeholder="Lower price limit">
16 <div>
17 <ul>
18 <li ng-repeat="p in datas">
19 {{p.name}}
20 </li>
21 </ul>
22 </div>
23 </div>
24 </body>
25 </html>
2) JS code:
1 let httpApp = angular.module( 'searchApp', [] );
2
3 httpApp.controller( 'dataCtrl', [ "$scope", "$http", function( $scope, $http ){
4 let http = $http.get( "conf.json" );
5 //Simulated from the back end json Data.
6 $scope.content = '';
7 $scope.$watch("content + top + bottom",function(){
8 http.then(
9 // success callback
10 function success( response ){
11 $scope.datas = response.data;
12 //Price screening.
13 $scope.datas=$scope.datas.filter(function( x,index ){
14 if($scope.top===undefined&&$scope.bottom===undefined)
15 {
16 return 1;
17 }
18 else if($scope.top===undefined){
19 return x.price>=$scope.bottom
20 }
21 else if($scope.bottom===undefined){
22 return x.price<=$scope.top;
23 }
24 else{
25 return x.price>=$scope.bottom&&x.price<=$scope.top;
26 }
27 });
28 //Conduct search content screening.
29 $scope.datas=$scope.datas.filter(function( x,index ){
30 system=x.system.indexOf($scope.content)+1;
31 name = x.name.indexOf($scope.content)+1;
32 producer=x.producer.indexOf($scope.content)+1;
33 if(system+name+producer>=1){
34 return 1;
35 }
36 else{
37 return 0;
38 }
39 })
40 },
41 // error callback
42 function error( response ){
43 console.log( response );
44 }
45 );
46 });
47 } ] );
PS: In order to be lazy, I didn't write a nice style. If you need it, you can add it yourself.
3) conf.json code:
1 [
2 {
3 "system": "ios",
4 "name": "Apple iPhone 6s 16GB Rose Gold",
5 "price": 4698,
6 "producer": "Apple",
7 "pic": "01.jpg"
8 },
9 {
10 "system": "MIUI",
11 "name": "Millet Mobile 4 S All Netcom Version 2 GB Memory 16 GB white",
12 "price": 1499,
13 "producer": "millet",
14 "pic": "02.jpg"
15 },
16 {
17 "system": "Android",
18 "name": "Enchanting blue note3 (16GB) Silver All Netcom Open Version Double Card Double Wait",
19 "price": 1099,
20 "producer": "meizu",
21 "pic": "03.jpg"
22 },
23 {
24 "system": "ios",
25 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
26 "price": 6587,
27 "producer": "Apple",
28 "pic": "04.jpg"
29 },
30 {
31 "system": "ios",
32 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
33 "price": 6578,
34 "producer": "Apple",
35 "pic": "04.jpg"
36 },
37 {
38 "system": "ios",
39 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
40 "price": 6788,
41 "producer": "Apple",
42 "pic": "04.jpg"
43 },
44 {
45 "system": "ios",
46 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
47 "price": 6878,
48 "producer": "Apple",
49 "pic": "04.jpg"
50 },
51 {
52 "system": "ios",
53 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
54 "price": 6528,
55 "producer": "Apple",
56 "pic": "04.jpg"
57 },
58 {
59 "system": "ios",
60 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
61 "price": 6988,
62 "producer": "Apple",
63 "pic": "04.jpg"
64 },
65 {
66 "system": "ios",
67 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
68 "price": 6388,
69 "producer": "Apple",
70 "pic": "04.jpg"
71 },
72 {
73 "system": "ios",
74 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
75 "price": 6378,
76 "producer": "Apple",
77 "pic": "04.jpg"
78 },
79 {
80 "system": "ios",
81 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
82 "price": 6738,
83 "producer": "Apple",
84 "pic": "04.jpg"
85 },
86 {
87 "system": "ios",
88 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
89 "price": 6568,
90 "producer": "Apple",
91 "pic": "04.jpg"
92 },
93 {
94 "system": "ios",
95 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
96 "price": 6558,
97 "producer": "Apple",
98 "pic": "04.jpg"
99 },
100 {
101 "system": "ios",
102 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
103 "price": 6738,
104 "producer": "Apple",
105 "pic": "04.jpg"
106 },
107 {
108 "system": "ios",
109 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
110 "price": 6428,
111 "producer": "Apple",
112 "pic": "04.jpg"
113 },
114 {
115 "system": "ios",
116 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
117 "price": 652488,
118 "producer": "Apple",
119 "pic": "04.jpg"
120 },
121 {
122 "system": "ios",
123 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
124 "price": 654588,
125 "producer": "Apple",
126 "pic": "04.jpg"
127 },
128 {
129 "system": "ios",
130 "name": "Apple iPhone 6s Plus 64GB Silver Mobile Unicom Telecom 4 G Mobile phone",
131 "price": 6545645688,
132 "producer": "Apple",
133 "pic": "04.jpg"
134 }
135 ]
PS: The json data transmitted by the server is simulated through the object. In addition, pictures can be added and implemented by themselves.
4. Last question:
Of course, the code I uploaded left a hole. How to cancel the corresponding price range after the input price is cleared?
Finally, how can the search method be optimized? Think about it as an extension.