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

前端之家收集整理的这篇文章主要介绍了Angular实现搜索框及价格上下限功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.要求:

利用 AngularJS 框架实现手机产品搜索功能,题目要求: 1)自行查找素材,按照原有数据格式将手机产品数据丰富到至少10个以上 2)自行设计页面,需要包含“搜索条件部分”,“手机信息显示部分” 3)当更改任何搜索条件时,需要实时显示搜索结果在“显示部分”中 4)搜索条件具体要求: 搜索框(匹配操作系统、产品名、产商进行模糊查询) 价格区间(开始价格~结束价格)

2.需求分析:

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

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

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

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

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

3.实际代码

1)HTML代码

<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"> AngularJS Page Useing Bootstrap Framework 搜索框" ng-model="content" placeholder="请输入要搜索的物品">

2)JS代码

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代码

PS:通过对象模拟了服务器传输的json数据。另外,图片可以自行添加,实现。

4.最后问题:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章