Angular-搜索框及价格上下限
Angular-搜索框及价格上下限
闲来无事，写一个简单的angular的搜索框。
1.要求：
利用 AngularJS 框架实现手机产品搜索功能，题目要求：
1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上
2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分”
3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中
4）搜索条件具体要求：
搜索框（匹配操作系统、产品名、产商进行模糊查询）
价格区间（开始价格~结束价格）
2.需求分析：
首先，我们需要将商品渲染到页面上。
其次，当我们输入搜索框文本时，动态显示符合搜索框文本的商品。
其中，动态指的时我们每输入一个字符，都会进行产品的筛选。
最后，价格的上下限也是同样的原理。
那么，这样一来，我们使用angular是最为方便的。因为angular对双向数据的支持非常好。
3.实际代码：
1）HTML代码：
<!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代码：
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代码：
[
{
"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实现输入框输入添加 搜索框查询
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g ...
- ionic,angularJs实现搜索框过滤关键字
利用AngularJS自带的过滤器,我们可以很方便的实现搜索框过滤的效果,但是怎么实现类似百度搜索过滤列表中关键字变色的效果呢? 页面上代码: <input type="text&qu ...
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
- angularjs select下拉搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- WPF 自定义搜索框
控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...
- weui 搜索框
点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...
- 搜索框(Thinkphp5.0)
1.普通关键词搜索框 模板部分代码: <form name='searchform' action='/index.php/module/controller/search' method='g ...
- IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
随机推荐
- Intellij IDEA 使用小结
快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键.在这个主题中,您可以找到最不可缺少的列表,使 IntelliJ IDEA 轻松实现第一步 ...
- 自学Zabbix3.8.4-可视化Visualisation-Slide shows
Zabbix3.8.4-可视化Visualisation-Slide shows幻灯片 定义好screen之后,我们想了解服务器状况之时,一般会一个个screen点过去,zabbix提供了幻灯片展示方 ...
- urllib2的基本使用
urlopen 1 import urllib2 2 3 # 向指定的url发送请求,并返回服务器响应的类文件对象 4 response = urllib2.urlopen("http:// ...
- MongodDB学习笔记（二）（复制）
mongoDB的复制非常容易配置,其实现有两种方式,一种是主从复制,一种是复制集,前者的好处是容易配置,但是如果主服务器宕掉了,整个系统就崩溃了,后者的好处是如果主服务器宕掉了,其他服务器会通过投票选 ...
- DotNetCore跨平台~为Lind.DotNetCore框架添加单元测试的意义
回到目录 单元测试大叔认为有几下两个必要的作用,也是为什么要上单元测试的原因 组件,框架在修改和BUG解决后,进行正确性的测试,然后才能打包 业务模块,主要提现在进行业务规则的模拟上面,保证了业务逻辑 ...
- akka-stream与actor系统集成以及如何处理随之而来的背压问题
这几天上海快下了五天的雨☔️☔️☔️☔️,淅淅沥沥,郁郁沉沉. 一共存在四个api: Source.actorRef,返回actorRef,该actorRef接收到的消息,将被下游消费者所消费 ...
- MySQL MVCC机制
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/68 行结构 每一行额外包含三个隐藏字段: DB_TRX_ID:事 ...
- JPA的基本使用
前提: 创建一个springboot项目 创建一个名为springboottest的MySQL数据库 1 jar包准备 jpa的jar包 mysql驱动的jar包 druid数据库连接池的jar包 l ...
- TxDragon的训练5
Solution 代码:由乃: //MADE BY QT666 #include<iostream> #include<cstdio> #include<algorith ...
- 解决MAVEN项目因achetype加载太慢的问题
解决方案: 加载太慢由于achetype-catalog.xml文件的访问问题,导致了整个构建过程的缓慢,所以是否能够将文件保存到本地,成为一种解决思路.翻阅Maven官方文档可以找到,确实是可以的. ...