離子無限滾動顯示已加載的更多項目（不是通過httprequest）

Question

我已經按照幾個教程嘗試在離子上實現無限滾動，它不會調用httprequest，而只是在DOM中為已經加載的列表顯示更多元素（我的JSON返回100多個項目就夠了對於我的情況）。

• AngularJS - 簡單的無限滾動 （AngularJS方法，非離子）
• http://ionicframework.com/docs/api/directive/ionInfiniteScroll/ （離線手冊，但從http加載）
• http://sunnycyk.com/2014/02/ionic-framework-infinite-scrolling/ （其他離子示例）

這是我的代碼如下。

• 我默認使用$scope.numberOfItemsToDisplay = 10;顯示10個項目$scope.numberOfItemsToDisplay = 10; 。
• 它沒有顯示$scope.loadMore;假設的+10項$scope.loadMore; 呼叫。
• 似乎函數$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>

任何想法？

Answer 1

我使用下面的代碼解決了同樣的問題，我有Scheduleles []數組和數據：

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個項目。

Answer 2

抱歉，我沒有閱讀您的所有代碼，但我基本上知道您的問題。

我建議你使用ion-infinite-scroll ，也許它會有所幫助。

請參閱http://codepen.io/elm/pen/Becqp以了解有關實施的更多信息。

希望這可以幫助你^^

Answer 3

它完成了我添加numberOfItemsToDisplay“>

</ion-infinite-scroll>