ionique infini défilement pour afficher plus d'éléments déjà chargés (pas par httprequest)

J'ai suivi plusieurs tutoriels pour essayer de mettre en œuvre infini défilement sur ionique de manière à ne pas appeler la httprequest, mais plutôt à l'affiche plus d'éléments dans le DOM pour une liste qui est déjà chargé (mon JSON renvoie 100+ d'articles qui est suffisant pour mon cas).

Voici mon code ci-dessous.

  • Je montre, par défaut 10 éléments correctement avec $scope.numberOfItemsToDisplay = 10;.
  • Il ne montre pas l' +10 points supposée par $scope.loadMore; appel.
  • Et il semble que la fonction $scope.loadMore = function(... n'est pas appelé à charge +10 plus défiler jusqu'à la fin.

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>

Une idée?

OriginalL'auteur ceyquem | 2014-07-29