javascript 离子无限滚动以显示更多已加载的项目（不是通过 httprequest）

ionic infinite-scroll to show more items already loaded (not by httprequest)

提问by ceyquem

I have followed several tutorials to try to implement infinite scrolling on ionic in a way that it does not call the httprequest but rather just shows more elements in the DOM for a list that is already loaded (my JSON returns 100+ of items which is enough for my case).

我已经按照几个教程尝试在 ionic 上实现无限滚动，它不会调用 httprequest 而只是在 DOM 中为已经加载的列表显示更多元素（我的 JSON 返回 100 多个项目，这就足够了对于我的情况）。

• AngularJS - A simple infinite scroll(AngularJS method, not ionic)
• http://ionicframework.com/docs/api/directive/ionInfiniteScroll/(Ionic manual but loading from http)
• http://sunnycyk.com/2014/02/ionic-framework-infinite-scrolling/(other Ionic example)

• AngularJS - 一个简单的无限滚动（AngularJS 方法，非离子）
• http://ionicframework.com/docs/api/directive/ionInfiniteScroll/（离子手册但从 http 加载）
• http://sunnycyk.com/2014/02/ionic-framework-infinite-scrolling/（其他离子示例）

Here is my code below.

下面是我的代码。

• I shows by default 10 items properly with $scope.numberOfItemsToDisplay = 10;.
• It does not show the +10 items supposed by $scope.loadMore;call.
• And it seems the function $scope.loadMore = function(...is not called to load +10 more scrolling to the end.

• 默认情况下，我使用$scope.numberOfItemsToDisplay = 10;.
• 它不显示通过$scope.loadMore;调用假设的 +10 项。
• 并且似乎$scope.loadMore = function(...没有调用该函数来加载 +10 次滚动到最后。

controller.js

控制器.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

广告.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>

Any idea?

任何的想法？

回答by SANAT

I solved my same issue by using below code, I have Schedules[] array with data :

我使用下面的代码解决了同样的问题，我有 Schedules[] 数组和数据：

HTML :

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>

Controller :

控制器 ：

$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')
}   

Here, I load 10 items every time addMoreItem() called.

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

回答by chuyik

Sorry I did not read all of your code, but I basically know your problem.

抱歉，我没有阅读您的所有代码，但我基本上知道您的问题。

I recommend you use ion-infinite-scroll, maybe it will be helpful.

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

See http://codepen.io/elm/pen/Becqpto know more about the implementation.

请参阅http://codepen.io/elm/pen/Becqp以了解有关实现的更多信息。

Hope this could help you^^

希望可以帮到你^^

回答by ahmed akremi

its done i add numberOfItemsToDisplay">

它完成了我添加 numberOfItemsToDisplay">

</ion-infinite-scroll>