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暴露出去

转载于:https://www.cnblogs.com/yr-rr/p/7116772.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值