您的位置:首页 > Web前端 > AngularJS

angular实现模糊查询实例,后台就不需要单独写模糊查询的条件了

2017-07-04 15:00 721 查看
前台HTML+js:

<div ng-app="myapp" >
<div ng-controller="mycontroller">
显示条数:<input type="text" ng-model="colum" /><br />
姓名:<input
type="text" ng-model="usename"/><br />
任何查询:<input type="text" ng-model="anySearch" /><br />
工资之上:<input type="text" ng-model="moeny" />
<p ng-repeat="item in studentList | limitTo:colum | orderBy:'-id' | filter:{'uname':usename} |
filter:anySearch |filter:{'salary':moeny}:compareS">
id:{{item.id}} 姓名:{{item.uname}} 工资:{{item.salary}} 出生日期:{{item.borth}}
</p>
</div>

</div>

<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("myapp",[])
app.controller("mycontroller",function($scope,studentFactory){
$scope.colum=4; //设置初始显示条数
studentFactory.studentList($scope);//studentFactory
$scope.compareS=function(a,b){  //用于判断值的大小
return a>b;
}
})
app.factory("studentFactory",function($http){
var factory={};
factory.studentList=function(obj){
$http.get("/getStudent")
.then(function(data){
obj.studentList=data.data; //把data的值写到studentList
}).catch(function(data){
console.log(data);
})
}
return factory;
})

</script>

app.js:

app.get("/getStudent",students.getStudent);  //students 是你单独写在路由里面的文件,getStudent是实现的方法 。在使用students时,需要先在app.js中声明const students=require("此处为你所写students.js的路径");

students.js:

//此处没有连接数据库,只是模拟取出数据

var students={
getStudent:function(req,res){
console.log("sdsdsd");
console.log(req.query.uname);
var student=[{id:1,uname:"赤赤",salary:12000,borth:'1995-12-12'},
            {id:2,uname:"冬冬",salary:20000,borth:'1969-11-11'},
            {id:3,uname:"婷婷",salary:15000,borth:'1995-05-20'},
            {id:4,uname:"胖子",salary:12000,borth:'1980-12-12'},
            {id:5,uname:"啦啦",salary:12000,borth:'1999-12-12'},
            ];
res.send(student);
}

};

module.exports=students;//将你自己的students暴露出去
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angular 模糊查询