Angular を使用して検索ボックスを実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Angular を使用して検索ボックスを実装する方法

亚连

Jun 11, 2018 pm 02:41 PM

angular検索バー

この記事では、Angular の検索ボックスと価格の上限と下限の機能の実装について詳しく紹介します。興味のある方は参考にしてください。

単純な 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">
  <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 コード:

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: 怠惰に言うと、見栄えの良いスタイルを書いていません。必要に応じて自分で追加できます。

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. 最後の質問:

もちろん、私がアップロードしたコードには穴が残りました。価格を入力してクリアした後に、該当する価格帯の制限を解除する方法。

最後に、拡張として検索方法をどのように最適化できるかを考えることができます。

上記は私があなたのためにまとめたものです。

Vue の nextTick メソッドの詳細な紹介

Vue コンポーネントでのスロットの使用方法 (詳細なチュートリアル)

vue プロジェクトの構造 (詳細なチュートリアル)

使い方JS で電子メールプロンプト補完機能を実装する

JS を介して放物線運動を実装する方法 (詳細なチュートリアル)

Express でセッションメソッドと Cookie メソッドを使用する方法 (詳細なチュートリアル)

を使用してベジェを実装する方法JavaScript Er 曲線アルゴリズム (詳細なチュートリアル)

ページを更新する vuex データが消えず、ページがジャンプしない問題 (詳細なチュートリアル)

以上がAngular を使用して検索ボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

See all articles