angular实现模糊查询实例,后台就不需要单独写模糊查询的条件了
前台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暴露出去