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

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

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

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

Javascript 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
You might like
一些常用的php函数
2006/12/06 PHP
php实现网站插件机制的方法
2009/11/10 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
php自定义分页类完整实例
2015/12/25 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
母亲节感恩寄语
2014/02/21 职场文书
活动总结怎么写啊
2014/05/07 职场文书
校园标语大全
2014/06/19 职场文书
多媒体教室标语
2014/06/26 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2014年度个人工作总结
2014/11/07 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers