Infinite Scrolling of dynamic data with ionic 1 and angular js 1

Question

How can I do infinite scrolling in ionic 1 and angular js 1 with dynamic data (Http request)from database ?

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

This is my angularjs controller. Use a factory named 'CountryService' which is doing http call to get server data. In formdata = {limit:serviceconfig.showlimit,page:page}; I sent limit =10 where I set in config.js service,and set page =1 for the first time.

For the first time GetDefault is called after scrolling GetLoadMore will be called with page =2 and limit=10 with next 10 new data.

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 For configuration

In this config.js I set the server url and limit, how many data I want to fetch from server each scroll. 'configService' service I inject in my js controller.

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

PHP SERVER SITE CODE:

I am using php laravel 5.1. So this is my php controller function for getting county list by below function

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;
    }