亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Angular實現(xiàn)搜索框及價格上下限功能

 更新時間:2018年01月19日 10:24:10   作者:血夜之末  
這篇文章主要為大家詳細介紹了Angular實現(xiàn)搜索框及價格上下限功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下

閑來無事,寫一個簡單的angular的搜索框。

1.要求:

利用 AngularJS 框架實現(xiàn)手機產品搜索功能,題目要求:
1)自行查找素材,按照原有數(shù)據(jù)格式將手機產品數(shù)據(jù)豐富到至少10個以上
2)自行設計頁面,需要包含“搜索條件部分”,“手機信息顯示部分”
3)當更改任何搜索條件時,需要實時顯示搜索結果在“顯示部分”中
4)搜索條件具體要求:
搜索框(匹配操作系統(tǒng)、產品名、產商進行模糊查詢)
價格區(qū)間(開始價格~結束價格) 

2.需求分析:

首先,我們需要將商品渲染到頁面上。

其次,當我們輸入搜索框文本時,動態(tài)顯示符合搜索框文本的商品。

其中,動態(tài)指的時我們每輸入一個字符,都會進行產品的篩選。

最后,價格的上下限也是同樣的原理。 

那么,這樣一來,我們使用angular是最為方便的。因為angular對雙向數(shù)據(jù)的支持非常好。 

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數(shù)據(jù)。
    $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 銀色 移動聯(lián)通電信4G手機",
    "price": 6587,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6578,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6788,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6878,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6528,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6988,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6388,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6378,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6738,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6568,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6558,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6738,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6428,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 652488,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 654588,
    "producer": "Apple",
    "pic": "04.jpg"
  },
  {
    "system": "ios",
    "name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
    "price": 6545645688,
    "producer": "Apple",
    "pic": "04.jpg"
  }
]

PS:通過對象模擬了服務器傳輸?shù)膉son數(shù)據(jù)。另外,圖片可以自行添加,實現(xiàn)。

4.最后問題:

當然,我上傳上來的代碼,還留了一個坑。如何在輸入價格,再清空后,取消對應價格區(qū)間的限制。

最后,搜索的方法,可以怎樣優(yōu)化,可以思考一下,作為一個拓展吧。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程

    Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程

    組件是我們在學習angular中必不可少的一部分,下面這篇文章主要給大家介紹了關于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關資料,文中通過圖文與示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-11-11
  • AngularJS基礎知識筆記之表格

    AngularJS基礎知識筆記之表格

    這篇文章主要介紹了AngularJS基礎知識筆記之表格的相關資料,需要的朋友可以參考下
    2015-05-05
  • AngularJS基礎 ng-focus 指令簡單示例

    AngularJS基礎 ng-focus 指令簡單示例

    本文主要介紹AngularJS ng-focus 指令,這里整理了ng-focus的一些基礎資料,并附一個實例代碼,有需要的小伙伴參考下
    2016-08-08
  • AngularJS入門教程之Cookies讀寫操作示例

    AngularJS入門教程之Cookies讀寫操作示例

    這篇文章主要介紹了AngularJS的Cookies讀寫操作,結合實例形式分析了ngCookies模塊與get和put方法進行cookie讀寫操作的相關實現(xiàn)技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJS自定義指令實現(xiàn)面包屑功能完整實例

    AngularJS自定義指令實現(xiàn)面包屑功能完整實例

    這篇文章主要介紹了AngularJS自定義指令實現(xiàn)面包屑功能,結合完整實例形式分析了AngularJS自定義指令的定義、調用及面包屑功能的具體實現(xiàn)技巧,需要的朋友可以參考下
    2017-05-05
  • ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子

    ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子

    這篇文章主要介紹了ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子,本文簡單介紹AngularJS框架后,用一個實例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下
    2014-12-12
  • 總結AngularJS開發(fā)者最常犯的十個錯誤

    總結AngularJS開發(fā)者最常犯的十個錯誤

    AngularJS是如今最受歡迎的JS框架之一,簡化開發(fā)過程是它的目標之一,這使得它非常適合于元型較小的apps的開發(fā),但也擴展到具有全部特征的客戶端應用的開發(fā)。下面給大家總結了AngularJS開發(fā)者最常犯的十個錯誤,有需要的可以參考學習下。
    2016-08-08
  • 詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例

    詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例

    本篇文章主要介紹了詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例 ,有需要的小伙伴可以參考下。
    2017-02-02
  • Angular.js中定時器循環(huán)的3種方法總結

    Angular.js中定時器循環(huán)的3種方法總結

    這篇文章主要給大家總結了angular.js中定時器循環(huán)的3種方法,分別是利用$interlval實現(xiàn)、$timeout的遞歸調用來實現(xiàn)以及$timeout借助arguments.callee來實現(xiàn),每種方法都給出了詳細的示例艾瑪供大家學習參考,需要的朋友們下面跟著小編一起來學習學習吧。
    2017-04-04
  • Angularjs為ng-click事件傳遞參數(shù)

    Angularjs為ng-click事件傳遞參數(shù)

    這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-06-06

最新評論