場景：
查詢在某段時間內使用某版本的用戶信息
輸入：
開始時間、結束時間、版本號
輸出：
用戶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>中加入onchange=”“即可
- 加入分頁，使用ng-show判斷是否顯示