ホームページ > 記事 > ウェブフロントエンド > Angular を使用して検索ボックスを実装する方法
Angular を使用して検索ボックスを実装する方法
- 亚连オリジナル
- 2018-06-11 14:41:222755ブラウズ
この記事では、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( '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. 最後の質問:
もちろん、私がアップロードしたコードには穴が残りました。価格を入力してクリアした後に、該当する価格帯の制限を解除する方法。
最後に、拡張として検索方法をどのように最適化できるかを考えることができます。
上記は私があなたのためにまとめたものです。
関連記事:
Vue コンポーネントでのスロットの使用方法 (詳細なチュートリアル)
JS を介して放物線運動を実装する方法 (詳細なチュートリアル)
Express でセッション メソッドと Cookie メソッドを使用する方法 (詳細なチュートリアル)
を使用してベジェを実装する方法JavaScript Er 曲線アルゴリズム (詳細なチュートリアル)
ページを更新する vuex データが消えず、ページがジャンプしない問題 (詳細なチュートリアル)
以上がAngular を使用して検索ボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。