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).
- AngularJS - Un simple infini défilement
(AngularJS méthode, et non ioniques) - http://ionicframework.com/docs/api/directive/ionInfiniteScroll/
(Ionique manuel, mais le chargement à partir de l'adresse http) - http://sunnycyk.com/2014/02/ionic-framework-infinite-scrolling/
(d'autres Ionique exemple)
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}} » {{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
Vous devez vous connecter pour publier un commentaire.
J'ai résolu mon problème en utilisant le code ci-dessous, j'ai des Horaires[] tableau avec les données :
HTML :
Contrôleur :
Ici, je charge 10 points à chaque fois addMoreItem() est appelé.
Acclamations 😉
OriginalL'auteur SANAT
Désolé, je n'ai pas lu tout votre code, mais en gros, je sais votre problème.
Je vous recommande d'utiliser
ion-infinite-scroll
, il sera peut-être utile.Voir http://codepen.io/elm/pen/Becqp pour en savoir plus sur la mise en œuvre.
Espère que cela pourrait vous aider^^
OriginalL'auteur chuyik
sa fait je ajouter
numberOfItemsToDisplay">
OriginalL'auteur ahmed akremi