Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:21:27

Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能

Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能:閑來無事，寫一個(gè)簡(jiǎn)單的angular的搜索框。 1.要求：利用 AngularJS 框架實(shí)現(xiàn)手機(jī)產(chǎn)品搜索功能，題目要求： 1）自行查找素材，按照原有數(shù)據(jù)格式將手機(jī)產(chǎn)品數(shù)據(jù)豐富到至少10個(gè)以上 2）自行設(shè)計(jì)頁面，需要包含搜索條件部分，手機(jī)信息顯示部分 3）當(dāng)更

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能:閑來無事，寫一個(gè)簡(jiǎn)單的angular的搜索框。 1.要求：利用 AngularJS 框架實(shí)現(xiàn)手機(jī)產(chǎn)品搜索功能，題目要求： 1）自行查找素材，按照原有數(shù)據(jù)格式將手機(jī)產(chǎn)品數(shù)據(jù)豐富到至少10個(gè)以上 2）自行設(shè)計(jì)頁面，需要包含搜索條件部分，手機(jī)信息顯示部分 3）當(dāng)更

閑來無事，寫一個(gè)簡(jiǎn)單的angular的搜索框。

1.要求：

利用 AngularJS 框架實(shí)現(xiàn)手機(jī)產(chǎn)品搜索功能，題目要求：
1）自行查找素材，按照原有數(shù)據(jù)格式將手機(jī)產(chǎn)品數(shù)據(jù)豐富到至少10個(gè)以上
2）自行設(shè)計(jì)頁面，需要包含“搜索條件部分”，“手機(jī)信息顯示部分”
3）當(dāng)更改任何搜索條件時(shí)，需要實(shí)時(shí)顯示搜索結(jié)果在“顯示部分”中
4）搜索條件具體要求：
搜索框（匹配操作系統(tǒng)、產(chǎn)品名、產(chǎn)商進(jìn)行模糊查詢）
價(jià)格區(qū)間（開始價(jià)格~結(jié)束價(jià)格）

2.需求分析：

首先，我們需要將商品渲染到頁面上。

其次，當(dāng)我們輸入搜索框文本時(shí)，動(dòng)態(tài)顯示符合搜索框文本的商品。

其中，動(dòng)態(tài)指的時(shí)我們每輸入一個(gè)字符，都會(huì)進(jìn)行產(chǎn)品的篩選。

最后，價(jià)格的上下限也是同樣的原理。

那么，這樣一來，我們使用angular是最為方便的。因?yàn)閍ngular對(duì)雙向數(shù)據(jù)的支持非常好。

3.實(shí)際代碼：

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="請(qǐng)輸入要搜索的物品">
 <input type="text" name="價(jià)格上限" ng-model="top" placeholder="價(jià)格上限">
 <input type="text" name="價(jià)格下限" ng-model="bottom" placeholder="價(jià)格下限">
 <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數(shù)據(jù)。
 $scope.content = '';
 $scope.$watch("content + top + bottom",function(){
 http.then(
 // success callback
 function success( response ){
 $scope.datas = response.data;
 //進(jìn)行價(jià)格篩選。
 $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;
 }
 });
 //進(jìn)行搜索內(nèi)容篩選。
 $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": "小米手機(jī)4S 全網(wǎng)通版 2GB內(nèi)存 16GB 白色",
 "price": 1499,
 "producer": "小米",
 "pic": "02.jpg"
 },
 {
 "system": "Android",
 "name": "魅藍(lán)note3 （16GB） 銀色 全網(wǎng)通公開版 雙卡雙待",
 "price": 1099,
 "producer": "魅族科技",
 "pic": "03.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6587,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6578,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6788,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6878,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6528,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6988,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6388,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6378,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6738,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6568,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6558,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6738,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6428,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 652488,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 654588,
 "producer": "Apple",
 "pic": "04.jpg"
 },
 {
 "system": "ios",
 "name": "Apple iPhone 6s Plus 64GB 銀色 移動(dòng)聯(lián)通電信4G手機(jī)",
 "price": 6545645688,
 "producer": "Apple",
 "pic": "04.jpg"
 }
]

PS：通過對(duì)象模擬了服務(wù)器傳輸?shù)膉son數(shù)據(jù)。另外，圖片可以自行添加，實(shí)現(xiàn)。

4.最后問題：

當(dāng)然，我上傳上來的代碼，還留了一個(gè)坑。如何在輸入價(jià)格，再清空后，取消對(duì)應(yīng)價(jià)格區(qū)間的限制。

最后，搜索的方法，可以怎樣優(yōu)化，可以思考一下，作為一個(gè)拓展吧。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com