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).

• AngularJS - A simple infinite scroll (AngularJS method, not ionic)
• / (Ionic manual but loading from http)
• / (other Ionic example)

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.

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('.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="/{{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?

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).

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

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.

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./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./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?

• javascript
• angularjs
• infinite-scroll
• ionic-framework

3 Answers 3

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

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.

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

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

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

Hope this could help you^^

its done i add numberOfItemsToDisplay">

</ion-infinite-scroll>