Angular-搜索框及价格上下限
2018-06-24 01:18:52来源：未知 阅读 ()
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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- jQuery EasyUI tree增加搜索功能的实现方法 2019-12-17
- JS递归及二叉搜索树的移除节点 2019-08-14
- 在javascript对象内搜索，貌似是一个新鲜的话题。 2019-08-14
- vueSSR渲染原理 2019-05-18
- vue中使用百度地图，悬浮窗搜索功能 2019-01-03
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
