Бесконечная прокрутка динамических данных с ионной 1 и угловой JS 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. Используйте фабрику с именем CountryService, которая выполняет http-вызов для получения данных сервера. В formdata = {limit: serviceconfig.showlimit, page: page}; Я отправил limit = 10, где я установил в сервисе config.js, и установил page = 1 в первый раз.

Впервые GetDefault вызывается после прокрутки. GetLoadMore будет вызываться с page = 2 и limit = 10 со следующими 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-СЕРВЕРА:

Я использую 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;
}