我是靠谱客的博主 欣喜信封,这篇文章主要介绍Angular实现搜索框及价格上下限功能,现在分享给大家,希望可以做个参考。

闲来无事,写一个简单的angular的搜索框。

1.要求:

利用 AngularJS 框架实现手机产品搜索功能,题目要求:
1)自行查找素材,按照原有数据格式将手机产品数据丰富到至少10个以上
2)自行设计页面,需要包含“搜索条件部分”,“手机信息显示部分”
3)当更改任何搜索条件时,需要实时显示搜索结果在“显示部分”中
4)搜索条件具体要求:
搜索框(匹配操作系统、产品名、产商进行模糊查询)
价格区间(开始价格~结束价格) 

2.需求分析:

首先,我们需要将商品渲染到页面上。

其次,当我们输入搜索框文本时,动态显示符合搜索框文本的商品。

其中,动态指的时我们每输入一个字符,都会进行产品的筛选。

最后,价格的上下限也是同样的原理。 

那么,这样一来,我们使用angular是最为方便的。因为angular对双向数据的支持非常好。 

3.实际代码:

1)HTML代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>AngularJS Page Useing Bootstrap Framework</title> <link rel="stylesheet" href=""> <script src="./lib/angular/angular-v1.6.6.js"></script> </head> <body ng-app="searchApp"> <div ng-controller="dataCtrl"> <input type="text" name="搜索框" ng-model="content" placeholder="请输入要搜索的物品"> <input type="text" name="价格上限" ng-model="top" placeholder="价格上限"> <input type="text" name="价格下限" ng-model="bottom" placeholder="价格下限"> <div> <ul> <li ng-repeat="p in datas"> {{p.name}} </li> </ul> </div> </div> </body> </html>

2)JS代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
let httpApp = angular.module( 'searchApp', [] ); httpApp.controller( 'dataCtrl', [ "$scope", "$http", function( $scope, $http ){ let http = $http.get( "conf.json" ); //模拟从后端获取的json数据。 $scope.content = ''; $scope.$watch("content + top + bottom",function(){ http.then( // success callback function success( response ){ $scope.datas = response.data; //进行价格筛选。 $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; } }); //进行搜索内容筛选。 $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:为了偷懒,我并没有写很好看的样式。如果你需要,可以自己添加。

3)conf.json代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
[ { "system": "ios", "name": "Apple iPhone 6s 16GB 玫瑰金色", "price": 4698, "producer": "Apple", "pic": "01.jpg" }, { "system": "MIUI", "name": "小米手机4S 全网通版 2GB内存 16GB 白色", "price": 1499, "producer": "小米", "pic": "02.jpg" }, { "system": "Android", "name": "魅蓝note3 (16GB) 银色 全网通公开版 双卡双待", "price": 1099, "producer": "魅族科技", "pic": "03.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6587, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6578, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6788, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6878, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6528, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6988, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6388, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6378, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6738, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6568, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6558, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6738, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6428, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 652488, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 654588, "producer": "Apple", "pic": "04.jpg" }, { "system": "ios", "name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机", "price": 6545645688, "producer": "Apple", "pic": "04.jpg" } ]

PS:通过对象模拟了服务器传输的json数据。另外,图片可以自行添加,实现。

4.最后问题:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

最后

以上就是欣喜信封最近收集整理的关于Angular实现搜索框及价格上下限功能的全部内容,更多相关Angular实现搜索框及价格上下限功能内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(149)

评论列表共有 0 条评论

立即
投稿
返回
顶部