Heim > Artikel > Web-Frontend > So implementieren Sie ein Suchfeld mit Angular

So implementieren Sie ein Suchfeld mit Angular

亚连Original: 2018-06-11 14:41:222706Durchsuche

Dieser Artikel stellt hauptsächlich die Implementierung des Suchfelds und der Preisober- und -untergrenze im Detail vor. Er hat einen gewissen Referenzwert.

Wenn Sie nichts zu tun haben, schreiben Sie einen Winkelsuchfeld.

1. Anforderungen:

Verwenden Sie das AngularJS-Framework, um die mobile Produktsuchfunktion zu implementieren:
1) Finden Sie die Materialien selbst und konvertieren Sie sie Mobiltelefon in das ursprüngliche Datenformat Produktdaten werden auf mindestens 10 oder mehr angereichert
2) Entwerfen Sie die Seite selbst, die den „Suchbedingungsteil“ und den „Anzeigeteil für Mobiltelefoninformationen“ enthalten muss
3 ) Beim Ändern von Suchbedingungen müssen die Suchergebnisse in Echtzeit angezeigt werden in „
4) Spezifische Anforderungen für Suchbedingungen in „Teil anzeigen“:
Suchfeld (entspricht Betriebssystem, Produktname, Hersteller für Fuzzy-Abfrage)
Preisspanne (Startpreis ~ Endpreis)

2. Nachfrageanalyse:

Zuerst müssen wir das Produkt auf der Seite rendern.

Zweitens werden bei der Eingabe des Suchfeldtexts dynamisch Produkte angezeigt, die mit dem Suchfeldtext übereinstimmen.

Dynamisch bedeutet unter anderem, dass das Produkt jedes Mal gefiltert wird, wenn wir ein Zeichen eingeben.

Abschließend gilt das gleiche Prinzip für die Ober- und Untergrenze des Preises.

Auf diese Weise ist es für uns am bequemsten, Winkel zu verwenden. Weil Angular bidirektionale Daten sehr gut unterstützt.

3. Tatsächlicher Code:

1) HTML-Code:

<!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">
  <p 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="价格下限">
    <p>
      <ul>
        <li ng-repeat="p in datas">
          {{p.name}}
        </li>
      </ul>
    </p>
  </p>
</body>
</html>

2) JS-Code:

let httpApp = angular.module( &#39;searchApp&#39;, [] );
  
  httpApp.controller( &#39;dataCtrl&#39;, [ "$scope", "$http", function( $scope, $http ){
    let http = $http.get( "conf.json" );
    //模拟从后端获取的json数据。
    $scope.content = &#39;&#39;;
    $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: Für Ich bin faul, ich habe keinen sehr schönen Stil geschrieben. Sie können es bei Bedarf selbst hinzufügen.

3) conf.json-Code:

[
  {
    "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: Die vom Server übertragenen JSON-Daten werden durch Objekte simuliert. Darüber hinaus können Bilder selbst hinzugefügt und umgesetzt werden.

4. Letzte Frage:

Natürlich hat der Code, den ich hochgeladen habe, eine Lücke hinterlassen. So heben Sie die Einschränkung der entsprechenden Preisspanne auf, nachdem Sie den Preis eingegeben und gelöscht haben.

Abschließend können Sie darüber nachdenken, wie die Suchmethode als Erweiterung optimiert werden kann.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in die nextTick-Methode in Vue

Was sind die Verwendungszwecke von Slots in Vue-Komponenten (Details Tutorial )

Vue-Projektstruktur (ausführliches Tutorial)

So implementieren Sie die Funktion zum Abschluss von E-Mail-Eingabeaufforderungen in JS

So implementieren Sie parabolische Bewegungen durch JS (ausführliches Tutorial)

Wie Sie Sitzungs- und Cookie-Methoden in Express verwenden (ausführliches Tutorial)

So implementieren Sie den Bezier-Kurven-Algorithmus mithilfe von JavaScript (ausführliches Tutorial)

Das Problem, dass die Vuex-Daten nicht verschwinden und die Seite nicht springt, wenn die Seite aktualisiert wird (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Suchfeld mit Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So veröffentlichen Sie eine Vue+Todo-List-AnwendungNächster Artikel：So veröffentlichen Sie eine Vue+Todo-List-Anwendung

In Verbindung stehende Artikel

Mehr sehen