//控制器、FinancList服務 $ionicListDelegate(list控制器) $timeout定時器
.controller('FriendsCtrl', function($scope, FinancList,$ionicListDelegate,$timeout) {
$scope.items = [];
FinancList.getList().query(function(response){
$scope.items = response;//必須是JSON數組或集合
});
//上拉刷新
$scope.doRefresh = function() {
FinancList.param.curPage=0;
FinancList.getList().query(function(response){
$scope.items = response;
// 中止廣播ion-refresher
$scope.$broadcast('scroll.refreshComplete');
});
};
FinancList.param.hasmore = true;
//更多
$scope.loadMore = function() {
//這裏使用定時器是爲了緩存一下加載過程,防止加載過快
$timeout(function() {
if(!FinancList.param.hasmore){
$scope.$broadcast('scroll.infiniteScrollComplete');
return;
}
FinancList.getList().query(function(response){
FinancList.param.hasmore = response.pageBean.page.length>0;
for(var i=0;i<response.pageBean.page.length;i++){
$scope.items.push(response.pageBean.page[i]);
}
$scope.$broadcast('scroll.infiniteScrollComplete');
FinancList.param.curPage++;
});
},1000);
};
$scope.moreDataCanBeLoaded = function(){
return FinancList.param.hasmore;
}
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});
$ionicListDelegate.showReorder(true);
})
//視圖
<ion-view title="標題">
<ion-content has-header="true">
<!--下拉刷新-->
<ion-refresher
pulling-text="下拉刷新"
pulling-icon="ion-loading-c"
refreshing-text="刷新成功"
refreshing-icon="ion-loading-c"
on-refresh="doRefresh()">
</ion-refresher>
<ion-list><!--href="#/tab/friend/{{page.id}}"-->
<a class="item p0" href="#/friend-detail/{{page.id}}" ng-repeat="page in items">
<div class="row p0">
<div class="col p0">
<div class="row nypic"></div>
</div>
<div class="col col-75">
<div class="row">
<div class="col">{{page.borrowTitle}}</div>
</div>
<div class="row">
<div class="col">年利率</div>
<div class="col">總額</div>
<div class="col">期限</div>
</div>
<div class="row">
<div class="col orange">{{page.annualRate | number:2}}%</div>
<div class="col">{{page.borrowAmount}}</div>
<div class="col">{{page.deadline}}<b ng-switch on="page.isDayThe"><b ng-switch-when="1">個月</b><b ng-switch-default>天</b></b></div>
</div>
<div class="row">
<div class="col"><div class="progress_bg_my"><div class="progress_my" style="width:{{page.schedules}}%"></div></div>{{page.schedules}}%</div>
</div>
</div>
</div>
<div class="item item-divider"></div>
</a>
</ion-list>
<!--上拉更多 ng-if="moreDataCanBeLoaded()"-->
<ion-infinite-scroll
icon="ion-loading-c"
ng-if="moreDataCanBeLoaded()"
on-infinite="loadMore()"
distance="10%">
</ion-infinite-scroll>
</ion-content>
</ion-view>
//服務
.factory('FinancList', function($resource,UrlUtil){
var param = {};
//頁碼
param.curPage = 1;
param.hasmore = false;
function getList(){
return $resource(UrlUtil.root+'financeList.do', {}, {
query: {method:'GET',params: param}
});
}
return {
getList:getList,
param:param
};
})數組