php - 使用 ionic 1 和 angular js 1 无限滚动动态数据

Question

如何使用来自数据库的动态数据（Http 请求）在 ionic 1 和 angular 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>

控制器.js

这是我的 angularjs 控制器。使用名为“CountryService”的工厂进行 http 调用以获取服务器数据。在 formdata = {limit:serviceconfig.showlimit,page:page}; 我在 config.js 服务中设置了 limit =10，并且第一次设置了 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 和限制，每次滚动我想从服务器获取多少数据。我在我的 js 控制器中注入的“configService”服务。

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