首頁 > 開發者 > JavaScript
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"> <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.最後問題：
當然，我上傳上來的代碼，還留了一個坑。如何在輸入價格，再清空後，取消對應價格區間的限制。
最後，搜尋的方法，可以怎樣最佳化，可以思考一下，作為一個拓展吧。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
