闲来无事，写一个简单的angular的搜索框。
1.要求：
利用 AngularJS 框架实现手机产品搜索功能，题目要求：
1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上
2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分”
3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中
4）搜索条件具体要求：
搜索框（匹配操作系统、产品名、产商进行模糊查询）
价格区间（开始价格~结束价格）
2.需求分析：
首先，我们需要将商品渲染到页面上。
其次，当我们输入搜索框文本时，动态显示符合搜索框文本的商品。
其中，动态指的时我们每输入一个字符，都会进行产品的筛选。
最后，价格的上下限也是同样的原理。
那么，这样一来，我们使用angular是最为方便的。因为angular对双向数据的支持非常好。
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数据。
$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 全网通版 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\"
},
{
\"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,
\"producer\": \"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.最后问题：
当然，我上传上来的代码，还留了一个坑。如何在输入价格，再清空后，取消对应价格区间的限制。
最后，搜索的方法，可以怎样优化，可以思考一下，作为一个拓展吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容