Angular实现搜索框及价格上下限功能

Angular实现搜索框及价格上下限功能

闲来无事，写一个简单的angular的搜索框。

1.要求：

利用 Angularjs 框架实现手机产品搜索功能，题目要求：

1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上

2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分”

3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中

4）搜索条件具体要求：

搜索框（匹配操作系统、产品名、产商进行模糊查询）

价格区间（开始价格~结束价格）

2.需求分析：

首先，我们需要将商品渲染到页面上。

其次，当我们输入搜索框文本时，动态显示符合搜索框文本的商品。

其中，动态指的时我们每输入一个字符，都会进行产品的筛选。

最后，价格的上下限也是同样的原理。

那么，这样一来，我们使用angular是最为方便的。因为angular对双向数据的支持非常好。

3.实际代码：

1）HTML代码：

{{p.name}}

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 + tophttp:// + 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"

},

{

http://"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,

"prhttp://oducer": "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.最后问题：

当然，我上传上来的代码，还留了一个坑。如何在输入价格，再清空后，取消对应价格区间的限制。

最后，搜索的方法，可以怎样优化，可以思考一下，作为一个拓展吧。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。