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>
またコードずらずら書いただけだけど。以上です。