這篇文章主要為大家詳細介紹了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.最後問題:
當然,我上傳上來的程式碼,還留了一個坑。如何在輸入價格,再清空後,取消對應價格區間的限制。
最後,搜尋的方法,可以怎麼優化,可以思考一下,作為一個拓展吧。
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
在express如何使用session與cookie方法(詳細教學)
使用JavaScript如何實現貝塞爾曲線演算法(詳細教學)
#以上是使用Angular如何實作搜尋框的詳細內容。更多資訊請關注PHP中文網其他相關文章!