首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angular实现搜索框及价格上下限功能

Posted in Javascript onJanuary 19, 2018

闲来无事，写一个简单的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实现搜索框及价格上下限功能

- Author -

血夜之末

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 #Javascript
web前端vue实现插值文本和输出原始html
Jan 19 #Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
解决js ajax同步请求造成浏览器假死的问题
Jan 18 #Javascript
js实时监控文本框输入字数的实例代码
Jan 18 #Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 #Javascript
默认端口(3) shell(3) 443(1) 前后端分离(1) 二级域名(1) SSL(3) reload(1) 压力测试(1) URL重定向(3) 反向代理(2)
You might like
4.与数据库的连接
2006/10/09 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php GeoIP的使用教程
2011/03/09 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
php无限极分类实现方法分析
2019/07/04 PHP
爱恋千雪-US-AscII加密解密工具（网页加密）下载
2007/06/06 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python实现批量下载文件
2015/05/17 Python
Python实现数据库编程方法详解
2015/06/09 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
最新pycharm安装教程
2020/11/18 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Lookfantastic台湾：英国彩妆美发保养购物网
2018/03/26 全球购物
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
文明寝室申报材料
2014/05/12 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年女职工工作总结
2015/05/15 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
地道战观后感500字
2015/06/04 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android