首页
所有分类
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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
小程序实现授权登陆的解决方案
Dec 02 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
纸巾盒(1) 德生G88(1) ICF-F10(1) YH-R296(1) 德生1994(1) ICF-SW100(1) SRF-40W(1) 华普R-96(1) SRF-22W(1) PR-D3L(1)
You might like
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
Node.js事件驱动
2015/06/18 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python中selenium库的基本使用详解
2020/07/31 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
通俗讲解python 装饰器
2020/09/07 Python
Python读写锁实现实现代码解析
2020/11/28 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
初中英语演讲稿
2014/04/29 职场文书
经济类毕业生求职信
2014/06/26 职场文书
中职生求职信
2014/07/01 职场文书
2014年技术部工作总结
2014/12/12 职场文书
建党伟业观后感
2015/06/01 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
会议室管理制度范本
2015/08/06 职场文书
生活小常识广播稿
2015/08/19 职场文书
SQL Server代理：理解SQL代理错误日志处理方法
2021/06/30 SQL Server