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

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