ionic(cordova)にて無限スクロールを実装する
今回やりたいこととしては以下
・サーバーからデータを取得してレスポンスがなくなるまで無限スクロール
・エラーがあったら再読み込みボタンを表示
普通の無限スクロールです。ひな形としてメモしておく。

想定するJSON
[{id: 1, name: "Tom"}, {id: 2, name: "Ben"},・・・]コントローラー
.controller('ChatsCtrl', function($scope, $http, $timeout) {
$scope.items = [];
// API URL
var url = "/path/to/api.json";
// 1:リクエスト中 2:リクエスト完了 3:末尾に達した 9:エラー
var status;
$scope.get = function() {
status = 1;
$http.get(url)
.success(function(result) {
console.log(result);
if (0 < result.length) {
$scope.items = $scope.items.concat(result);
$timeout(function() {
$scope.$broadcast('scroll.infiniteScrollComplete');
});
} else {
status = 3;
}
})
.error(function(err) {
console.log(err);
status = 9;
});
};
$scope.canWeLoadMoreContent = function() {
return status != 3 && status != 9;
};
$scope.isError = function() {
return status == 9;
};
$scope.retry = function() {
status = 1;
$timeout(function() {
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
})テンプレート
<ion-list>
<ion-item collection-repeat="item in items">
・・・
</ion-item>
</ion-list>
<ion-item ng-if="isError()" class="text-center">
<button class="button button-clear button-assertive" ng-click="retry()">
[エラー]タップで再読み込み
</button>
</ion-item>
<ion-infinite-scroll
ng-if="canWeLoadMoreContent()"
on-infinite="get()"
distance="5%">
</ion-infinite-scroll>またコードずらずら書いただけだけど。以上です。