场景:
查询在某段时间内使用某版本的用户信息
输入:
开始时间、结束时间、版本号
输出:
用户ID、用户昵称、跑步公里数
代码:
<body ng-app="app">
<div class="row" ng-controller="byDate">
<p style="margin-top:5rem">根据日期查询用户</p>
<div class="row" style="margin-top:5rem">
<div class="col-xs-3">
<input type="text" ng-model="startTime" class="form-control" placeholder="请输入开始时间" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss'})" onChange="">
</div>
<div class="col-xs-3">
<input type="text" ng-model="endTime" class="form-control" placeholder="请输入结束时间" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss'})" onChange="">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="请输入版本号" ng-model="appIdInput">
</div>
<div class="col-xs-3">
<button class="btn btn-primary" ng-click="searchByDate()">查询</button>
</div>
</div>
<div>
<ul class="col-xs-2 col-xs-offset-1" style="min-height:30rem;margin-top:2rem">
<li style="margin-top:1rem">用户Id</li>
<li ng-repeat="x in lists">{{x.memberId}}</li>
</ul>
<ul class="col-xs-2 col-xs-offset-1" style="min-height:30rem;margin-top:2rem">
<li style="margin-top:1rem">用户昵称</li>
<li ng-repeat="x in lists">{{x.nickName}}</li>
</ul>
<ul class="col-xs-5 col-xs-offset-1" style="min-height:30rem;margin-top:2rem">
<li style="margin-top:1rem">公里数</li>
<li ng-repeat="x in lists">{{x.sumLength.toFixed(2)}}</li>
</ul>
</div>
<div>
<div class="col-xs-6" style="text-align: right">
<button class="btn btn-primary" ng-click="prePage()" ng-show="notFirst">上一页</button>
</div>
<div class="col-xs-6">
<button class="btn btn-primary" ng-click="nextPage()" ng-show="isMore">下一页</button>
</div>
</div>
</div>
<script>
var a=angular.module('app',[]);
a.controller('byDate',function ($http,$scope) {
var pageStart=0;
var pageSize = 10;
$scope.searchByDate = function () {
var timestamp1 = Date.parse(new Date($scope.startTime))/1000;
var timestamp2 = Date.parse(new Date($scope.endTime))/1000;
$http({
method:'POST',
data:{
startDate:timestamp1,
endDate:timestamp2,
pageStart:pageStart,
pageSize:pageSize
},
params:{
appId:$scope.appIdInput,
userId:'11345973',
methodName:'searchUserInfoByTime'
},
url:"newDEyesPostProxy"
})
.success(function (response) {
$scope.lists = response.userList;
if(response.userList.length == pageSize){
$scope.isMore = true;
}else{
$scope.isMore = false;
}
if(pageStart == 0){
$scope.notFirst = false;
}else{
$scope.notFirst = true;
}
})
}
$scope.prePage = function(){
pageStart -= pageSize;
$scope.searchByDate();
}
$scope.nextPage = function(){
pageStart += pageSize;
$scope.searchByDate();
}
})
</script>
</body>
技术点
- angular js中使用ajax的基本语法流程,与普通js和vuejs区别
- 用到了日历,angularjs与My97DatePicker不兼容,解决办法是在< input>中加入οnchange=”“即可
- 加入分页,使用ng-show判断是否显示