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

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 );
}
);
});
} ] );

{ "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,"pic": "04.jpg" },"price": 6578,"price": 6788,"price": 6878,"price": 6528,"price": 6988,"price": 6388,"price": 6378,"price": 6738,"price": 6568,"price": 6558,"price": 6428,"price": 652488,"price": 654588,"price": 6545645688,"pic": "04.jpg" } ]