イオン1と角度jsを持つ動的データの無限スクロール1

Question

データベースからの動的データ（Httpリクエスト）を使用してイオン1と角度js 1で無限スクロールを実行するにはどうすればよいですか？

Answer 1

HTML：

<ion-view view-title="Playlists"> 
    <ion-content> 
    <ion-list> 
     <ion-item class="item-avatar" ng-repeat="item in items">   
      <h2>{{item.name}} -{{item.id}}</h2> 
      <p>{{item.iso_code_2}} {{item.iso_code_3}}</p> 
     </ion-item> 
    </ion-list> 
    <div ng-if="hasData"> 
     <ion-infinite-scroll on-infinite="loadMore()" distance="5%"> 
     </ion-infinite-scroll> 
     </div> 
    </ion-content> 
</ion-view> 

Controller.js

これは私のangularjsコントローラです。サーバーデータを取得するためにhttp呼び出しを行っている 'CountryService'という名前のファクトリを使用します。 formdata = {limit：serviceconfig.showlimit、page：page}にあります。私はconfig.jsサービスで設定したlimit = 10を送って、最初にpage = 1に設定しました。

GetLoadMoreがスクロールされた後に初めてGetDefaultが呼び出されると、次の10個の新しいデータでpage = 2とlimit = 10で呼び出されます。

angular.module('starter.usercontroller', []) 

.controller('UserCtrl', function($scope, CountryService, $ionicModal, 
$timeout, $http, serviceconfig, $ionicPopup,$state, ionicDatePicker, $filter) { 

$scope.hasData=1; // If data found 

    $scope.items = []; 

    CountryService.GetDefault().then(function(items){ 
    $scope.items = items; 
    }); 

    $scope.loadMore = function() { 
    CountryService.GetLoadMore().then(function(items){ 
     $scope.items = $scope.items.concat(items); 
     if(items.length>0) 
     { 
     $scope.$broadcast('scroll.infiniteScrollComplete'); // If has data then load more     
     } 
     else 
     { 
     $scope.hasData=0;  // If no more data to load 
     } 

    }); 
    }; 
}) 
.factory('CountryService', 
      ['$http','serviceconfig',function($http,serviceconfig){ 
    var items = []; 
    var page =1; 

    var formdata = {limit:serviceconfig.showlimit,page:page}; 


return { 
    GetDefault: function(){ 
     formdata = {limit:serviceconfig.showlimit,page:page}; 
     return $http.post(serviceconfig.serviceUrl+ "all-countries",formdata).then(function(response){ 

     if(response.data.status==1) 
      { 
      items = response.data.countries;    
      } 
      else 
      { 
      items =[]; 
      } 
     return items; 
     }); 
    }, 
    GetLoadMore: function(){ 
     formdata = {limit:serviceconfig.showlimit,page:page};  
     return $http.post(serviceconfig.serviceUrl+ "all-countries",formdata).then(function(response){   
     page = page+1; 
     if(response.data.status==1) 
      { 
      items = response.data.countries;    
      } 
      else 
      { 
      items =[]; 
      } 
     return items; 
     }); 
    } 
    } 
}]); 

このconfig.jsので設定

についてはconfig.jsの私は、サーバーから各スクロールを取得したいどのように多くのデータ、サーバーのURLと上限を設定します。 'configService'サービス私はjsコントローラに注入します。

angular.module('starter.configService', []) 
.service('serviceconfig',function(){ 
this.serviceUrl='http://192.168.1.116/ionicserver/service/'; 
this.showlimit=10; 
}) 

PHP ServerサイトCODE：

私はPHPのlaravel 5.1を使用しています。これは、私のPHPコントローラの機能を下に郡リストを取得するためです

public function postAllCountries() // Countries 
    { 
     $data = Request::all(); 
     $limit= $data['limit']; 
     $page = $data['page']; 
     $offset = ($page - 1) * $limit; 
     $countries = Country::where('id','>',0)->take($limit)->skip($offset); 
     $countries = $countries->get()->toArray(); 
     if(!empty($countries)) 
     { 
      echo json_encode(array('status'=>1,'msg'=>'Successfully Registered','countries'=>$countries)); 
     } 
     else 
     { 
      echo json_encode(array('status'=>0,'msg'=>'No data found'));    
     } 
     exit; 
    }