Angular如何實現(xiàn)搜索框-創(chuàng)新互聯(lián)
這篇文章主要介紹Angular如何實現(xiàn)搜索框，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1.要求：
利用 AngularJS 框架實現(xiàn)手機產品搜索功能，題目要求：
1）自行查找素材，按照原有數(shù)據(jù)格式將手機產品數(shù)據(jù)豐富到至少10個以上
2）自行設計頁面，需要包含“搜索條件部分”，“手機信息顯示部分”
3）當更改任何搜索條件時，需要實時顯示搜索結果在“顯示部分”中
4）搜索條件具體要求：
搜索框（匹配操作系統(tǒng)、產品名、產商進行模糊查詢）
價格區(qū)間（開始價格~結束價格）
2.需求分析：
首先，我們需要將商品渲染到頁面上。
其次，當我們輸入搜索框文本時，動態(tài)顯示符合搜索框文本的商品。
其中，動態(tài)指的時我們每輸入一個字符，都會進行產品的篩選。
最后，價格的上下限也是同樣的原理。
那么，這樣一來，我們使用angular是最為方便的。因為angular對雙向數(shù)據(jù)的支持非常好。
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數(shù)據(jù)。
$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 全網(wǎng)通版 2GB內存 16GB 白色",
"price": 1499,
"producer": "小米",
"pic": "02.jpg"
},
{
"system": "Android",
"name": "魅藍note3 （16GB） 銀色 全網(wǎng)通公開版 雙卡雙待",
"price": 1099,
"producer": "魅族科技",
"pic": "03.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6587,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6578,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6788,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6878,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6528,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6988,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6388,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6378,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6738,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6568,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6558,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6738,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6428,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 652488,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 654588,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 銀色 移動聯(lián)通電信4G手機",
"price": 6545645688,
"producer": "Apple",
"pic": "04.jpg"
}
]PS：通過對象模擬了服務器傳輸?shù)膉son數(shù)據(jù)。另外，圖片可以自行添加，實現(xiàn)。
4.最后問題：
當然，我上傳上來的代碼，還留了一個坑。如何在輸入價格，再清空后，取消對應價格區(qū)間的限制。
最后，搜索的方法，可以怎樣優(yōu)化，可以思考一下，作為一個拓展吧。
以上是“Angular如何實現(xiàn)搜索框”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
當前標題：Angular如何實現(xiàn)搜索框-創(chuàng)新互聯(lián)
文章鏈接：http://aaarwkj.com/article32/dohgpc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)站內鏈、動態(tài)網(wǎng)站、品牌網(wǎng)站制作、響應式網(wǎng)站、域名注冊
聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 商城網(wǎng)站建設要點 2016-10-11
- 電子商城網(wǎng)站開發(fā)，成都網(wǎng)站建設 2016-10-28
- 商城網(wǎng)站都有哪些功能，網(wǎng)上商城的功能模塊有哪些? 2022-11-11
- 商城系統(tǒng)搭建的核心是什么？ 2016-09-15
- 多少錢可以建一個微信商城網(wǎng)站？ 2016-09-28
- 商城網(wǎng)站建設一般需要多少錢 2016-10-12
- 商城網(wǎng)站建設的小技巧 2021-06-07
- 商城網(wǎng)站可延展功能賞析 2023-03-10
- 搭建商城網(wǎng)站要考慮到哪些要素呢？ 2016-08-11
- 如何搭建積分商城網(wǎng)站 2016-10-17
- 外貿商城網(wǎng)站建設提高交易量的幾種方式 2021-05-14
- 建設商城網(wǎng)站需要轉化做為支撐 2022-08-22