Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能
更新時(shí)間：2018年01月19日 10:24:10 作者：血夜之末
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能，具有一定的參考價(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)更改任何搜索條件時(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è)拓展吧。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Angularjs material 實(shí)現(xiàn)搜索框功能
- Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
- Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
- 在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例
- angularjs實(shí)現(xiàn)搜索的關(guān)鍵字在正文中高亮出來
- angularjs實(shí)現(xiàn)分頁和搜索功能
- Angularjs過濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
- angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例
- Angular封裝搜索框組件操作示例
相關(guān)文章
Angular 4根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建出組件的方法教程
組件是我們?cè)趯W(xué)習(xí)angular中必不可少的一部分，下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建出組件的相關(guān)資料，文中通過圖文與示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí)筆記之表格的相關(guān)資料,需要的朋友可以參考下2015-05-05
AngularJS基礎(chǔ) ng-focus 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-focus 指令,這里整理了ng-focus的一些基礎(chǔ)資料,并附一個(gè)實(shí)例代碼,有需要的小伙伴參考下2016-08-08
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結(jié)合實(shí)例形式分析了ngCookies模塊與get和put方法進(jìn)行cookie讀寫操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11
AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
這篇文章主要介紹了AngularJS自定義指令實(shí)現(xiàn)面包屑功能,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令的定義、調(diào)用及面包屑功能的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子
這篇文章主要介紹了ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子,本文簡(jiǎn)單介紹AngularJS框架后,用一個(gè)實(shí)例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下2014-12-12
總結(jié)AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤
AngularJS是如今最受歡迎的JS框架之一，簡(jiǎn)化開發(fā)過程是它的目標(biāo)之一，這使得它非常適合于元型較小的apps的開發(fā)，但也擴(kuò)展到具有全部特征的客戶端應(yīng)用的開發(fā)。下面給大家總結(jié)了AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤，有需要的可以參考學(xué)習(xí)下。2016-08-08
詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時(shí)間實(shí)例
本篇文章主要介紹了詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時(shí)間實(shí)例 ，有需要的小伙伴可以參考下。2017-02-02
Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
這篇文章主要給大家總結(jié)了angular.js中定時(shí)器循環(huán)的3種方法，分別是利用$interlval實(shí)現(xiàn)、$timeout的遞歸調(diào)用來實(shí)現(xiàn)以及$timeout借助arguments.callee來實(shí)現(xiàn)，每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06