Angular-搜索框及价格上下限

2018-06-24 01:18:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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.最后问题:

当然,我上传上来的代码,还留了一个坑。如何在输入价格,再清空后,取消对应价格区间的限制。

最后,搜索的方法,可以怎样优化,可以思考一下,作为一个拓展吧。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:对象内部属性[[Class]]

下一篇:JavaScript基础知识(正则表达式、字符串)