Angular-搜索框及價格上下限 閑來無事，寫一個簡單的angular的搜索框。 1.要求： 利用 AngularJS 框架實現手機產品搜索功能，題目要求： 1）自行查找素材，按照原有數據格式將手機產品數據豐富到至少10個以上 2）自行設計頁面，需要包含“搜索條件部分”，“手機信息顯示部分” 3） ...
Angular-搜索框及價格上下限
閑來無事，寫一個簡單的angular的搜索框。
1.要求：
利用 AngularJS 框架實現手機產品搜索功能，題目要求：
1）自行查找素材，按照原有數據格式將手機產品數據豐富到至少10個以上
2）自行設計頁面，需要包含“搜索條件部分”，“手機信息顯示部分”
3）當更改任何搜索條件時，需要實時顯示搜索結果在“顯示部分”中
4）搜索條件具體要求：
搜索框（匹配操作系統、產品名、產商進行模糊查詢）
價格區間（開始價格~結束價格）
2.需求分析：
首先，我們需要將商品渲染到頁面上。
其次，當我們輸入搜索框文本時，動態顯示符合搜索框文本的商品。
其中，動態指的時我們每輸入一個字元，都會進行產品的篩選。
最後，價格的上下限也是同樣的原理。
那麼，這樣一來，我們使用angular是最為方便的。因為angular對雙向數據的支持非常好。
3.實際代碼：
1）HTML代碼：
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="搜索框" ng-model="content" placeholder="請輸入要搜索的物品">
14 <input type="text" name="價格上限" ng-model="top" placeholder="價格上限">
15 <input type="text" name="價格下限" ng-model="bottom" placeholder="價格下限">
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代碼：
1 let httpApp = angular.module( 'searchApp', [] );
2
3 httpApp.controller( 'dataCtrl', [ "$scope", "$http", function( $scope, $http ){
4 let http = $http.get( "conf.json" );
5 //模擬從後端獲取的json數據。
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 //進行價格篩選。
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 //進行搜索內容篩選。
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：為了偷懶，我並沒有寫很好看的樣式。如果你需要，可以自己添加。
3）conf.json代碼：
1 [
2 {
3 "system": "ios",
4 "name": "Apple iPhone 6s 16GB 玫瑰金色",
5 "price": 4698,
6 "producer": "Apple",
7 "pic": "01.jpg"
8 },
9 {
10 "system": "MIUI",
11 "name": "小米手機4S 全網通版 2GB記憶體 16GB 白色",
12 "price": 1499,
13 "producer": "小米",
14 "pic": "02.jpg"
15 },
16 {
17 "system": "Android",
18 "name": "魅藍note3 （16GB） 銀色 全網通公開版 雙卡雙待",
19 "price": 1099,
20 "producer": "魅族科技",
21 "pic": "03.jpg"
22 },
23 {
24 "system": "ios",
25 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
26 "price": 6587,
27 "producer": "Apple",
28 "pic": "04.jpg"
29 },
30 {
31 "system": "ios",
32 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
33 "price": 6578,
34 "producer": "Apple",
35 "pic": "04.jpg"
36 },
37 {
38 "system": "ios",
39 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
40 "price": 6788,
41 "producer": "Apple",
42 "pic": "04.jpg"
43 },
44 {
45 "system": "ios",
46 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
47 "price": 6878,
48 "producer": "Apple",
49 "pic": "04.jpg"
50 },
51 {
52 "system": "ios",
53 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
54 "price": 6528,
55 "producer": "Apple",
56 "pic": "04.jpg"
57 },
58 {
59 "system": "ios",
60 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
61 "price": 6988,
62 "producer": "Apple",
63 "pic": "04.jpg"
64 },
65 {
66 "system": "ios",
67 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
68 "price": 6388,
69 "producer": "Apple",
70 "pic": "04.jpg"
71 },
72 {
73 "system": "ios",
74 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
75 "price": 6378,
76 "producer": "Apple",
77 "pic": "04.jpg"
78 },
79 {
80 "system": "ios",
81 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
82 "price": 6738,
83 "producer": "Apple",
84 "pic": "04.jpg"
85 },
86 {
87 "system": "ios",
88 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
89 "price": 6568,
90 "producer": "Apple",
91 "pic": "04.jpg"
92 },
93 {
94 "system": "ios",
95 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
96 "price": 6558,
97 "producer": "Apple",
98 "pic": "04.jpg"
99 },
100 {
101 "system": "ios",
102 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
103 "price": 6738,
104 "producer": "Apple",
105 "pic": "04.jpg"
106 },
107 {
108 "system": "ios",
109 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
110 "price": 6428,
111 "producer": "Apple",
112 "pic": "04.jpg"
113 },
114 {
115 "system": "ios",
116 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
117 "price": 652488,
118 "producer": "Apple",
119 "pic": "04.jpg"
120 },
121 {
122 "system": "ios",
123 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
124 "price": 654588,
125 "producer": "Apple",
126 "pic": "04.jpg"
127 },
128 {
129 "system": "ios",
130 "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯通電信4G手機",
131 "price": 6545645688,
132 "producer": "Apple",
133 "pic": "04.jpg"
134 }
135 ]
PS：通過對象模擬了伺服器傳輸的json數據。另外，圖片可以自行添加，實現。
4.最後問題：
當然，我上傳上來的代碼，還留了一個坑。如何在輸入價格，再清空後，取消對應價格區間的限制。
最後，搜索的方法，可以怎樣優化，可以思考一下，作為一個拓展吧。
