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控制器。使用名为＆＃39; CountryService＆＃39;的工厂正在进行http调用以获取服务器数据。在formdata = {limit：serviceconfig.showlimit，page：page};我在config.js服务中设置了limit = 10，并且第一次设置了page = 1。

第一次在滚动后调用GetDefault将使用page = 2调用GetLoadMore，使用下一个10个新数据调用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并限制了我想从服务器每次滚动获取多少数据。＆＃39;的ConfigService＆＃39;服务我在我的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;
    }

使用离子1和角度js 1无限滚动动态数据

1 个答案: