Ionic无限滚动显示更多的项目已经加载(不是通过httprequest)

我已经遵循了几个教程，试图实现无限滚动在离子上的一种方式，它不调用httprequest，而只是显示更多的元素在DOM中的列表，已经加载(我的JSON返回100+的项目，这是足够的，为我的情况)。

http://ionicframework.com/docs/api/directive/ionInfiniteScroll/(Ionic manual但是从http加载)
http://sunnycyk.com/2014/02/ionic-framework-infinite-scrolling/(其他Ionic示例)

下面是我的代码

I默认显示10项正确与$scope.numberOfItemsToDisplay = 10;。
不显示$scope.loadMore; call所假定的+10项。
似乎没有调用$scope.loadMore = function(...函数来加载+10更多的滚动到结束。

controller.js

angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};
  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  },
  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };
  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);
    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})
.controller('AdsCtrl', function($scope, $http) {
  $scope.name = 'World';
  $scope.numberOfItemsToDisplay = 10;
  $scope.ads = [];
  $http.get('http://some-url.com/list.json').success(function(data) {
    $scope.ads = data;
  });
  var counter = 0;
  $scope.loadMore = function(done) {
    console.log('Loading more', $scope.limit);
    if ($scope.ads.length > $scope.numberOfItemsToDisplay)
    $scope.numberOfItemsToDisplay += 10; // load 20 more items
    done(); // need to call this when finish loading more data
  }
  $scope.loadMore;
})
.controller('AdCtrl', function($scope, $stateParams) {
})

ads.html

<ion-view title="Ads">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-person"></button>
  </ion-nav-buttons>
  <ion-content has-header="true" on-infinite-scroll="loadMore">
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input ng-model="query" type="search" placeholder="Filter" filter="" class="" min-length="" model="" source="">
    </label>
    <ion-list>
      <ion-item ng-repeat="ad in ads | filter:query | limitTo:numberOfItemsToDisplay" class="item item-thumbnail-left" href="#/app/ads/{{ad.id}}">
            <img src="http://some-url.com/pictures/{{ad.photo}}">
            <h2>{{ad.title}}</h2>
            <h4>{{ad.price}} {{ad.currency}}</h4>
            <h4>{{ad.group}} &raquo; {{ad.category}}</h4>
            <h4 style="margin-bottom: 0;">{{ad.shortrelativetime}}</h4>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

任何想法?

我通过使用下面的代码解决了同样的问题，我有时间表[]数组与数据:

HTML:

<li class="item" ng-repeat="schedule in Schedules | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">
    Display some data
</li> 
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="Schedules.length > numberOfItemsToDisplay"></ion-infinite-scroll>

控制器:

$scope.numberOfItemsToDisplay = 10; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
    if ($scope.Schedules.length > $scope.numberOfItemsToDisplay)
        $scope.numberOfItemsToDisplay += 10; // load number of more items
        $scope.$broadcast('scroll.infiniteScrollComplete')
}

这里，我每次调用addMoreItem()时加载10个项目。

对不起，我没有读你所有的代码，但我基本上知道你的问题。

我建议你使用ion-infinite-scroll，也许它会有帮助。

参见http://codepen.io/elm/pen/Becqp了解更多关于实现的信息。

希望能帮到你^^

我添加numberOfItemsToDisplay ">

</ion-infinite-scroll>

相关内容

最新更新

热门标签：