欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-05 20:15:13
闲来无事,写一个简单的angular的搜索框。 1.要求: 利用 angularjs 框架实现手机产品搜索功能,题目要求: 1)自行查找素材,按照原有数据格式将手机产...

闲来无事,写一个简单的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.最后问题:

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

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

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