ion-infinite scroll fail with ionic

Question

I'm getting data from a web service and should get for each time you try to update, so the last id to load from the back to. That works fine for me, the problem is in the ion-scroll. I saw that if you are not accompanied by a ng-if infinite information load times quite uncomfortable. If there are data determined charge, if the charge, otherwise not charge anything and that is where I set value for my variable ng-if. But once the true seteo does not load my scroll anymore.

HTML

<ion-infinite-scroll on-infinite="loadMore()" ng-if="!noMoreItemsAvailable" distance="1%"></ion-infinite-scroll>

JS

$scope.refreshView = function () { if (!navigator.onLine) { $scope.hide(); $ionicPopup.show({ title: 'Notificación', subTitle: '', content: 'No tienes conexión a internet.', buttons: [{ text: 'Aceptar', type: 'button-positive', }, ] }) } else { console.log($scope.ultima_id); if (typeof $scope.ultima_id == "undefined" || $scope.ultima_id == "") { } else { console.log(UrlService.url + 'refreshView/' + sessionService.get("user_id") + '/' + sessionService.get("hash") + "/" + $scope.ultima_id); $http({ method: 'GET', url: UrlService.url + 'refreshView/' + sessionService.get("user_id") + '/' + sessionService.get("hash") + "/" + $scope.ultima_id }) .success(function (data) { console.log("Refresh " + data); if (data.Count > 0) { $scope.viewsDespeglables = true; angular.forEach(data.View, function (value, key) { if (data.Count - 1 == key) { $scope.ultima_id = value.id; } $scope.views.push(value); }); } else { console.log(data); $scope.noMoreItemsAvailable = true; } }) .error(function () {}) .finally(function () { $scope.$broadcast('scroll.infiniteScrollComplete'); }); } } } $scope.loadMore = function () { $scope.refreshView(); $scope.$broadcast('scroll.infiniteScrollComplete'); $scope.$broadcast('scroll.resize'); };

Jess Patton · Accepted Answer · 2015-06-30 15:08:38Z

Why not use a collection repeat? What is a collection repeat? : From the ionic Docs: "collection-repeat allows an app to show huge lists of items much more performantly than ng-repeat.

It renders into the DOM only as many items as are currently visible.

This means that on a phone screen that can fit eight items, only the eight items matching the current scroll position will be rendered.

The Basics:

The data given to collection-repeat must be an array. If the item-height and item-width attributes are not supplied, it will be assumed that every item in the list has the same dimensions as the first item. Don't use angular one-time binding (::) with collection-repeat. The scope of each item is assigned new data and re-digested as you scroll. Bindings need to update, and one-time bindings won't. "

Code:

<body ng-controller="MainCtrl as main"> <ion-header-bar class="bar-positive"> <h1 class="title">1000 Items</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item collection-repeat="item in main.items"> {{item}} </ion-item> </ion-list> </ion-content> </body> var myApp = angular.module('myApp', ['ionic']); myApp.controller('MainCtrl', function() { this.items = []; for (var i = 0; i < 1000; i++) this.items.push(i); });

Why do I need to do so when it goes down and a certain amount of data.
well you are using ng-if, which constructs the dom based on a variable. Collection repeat also constructs the dom but only by what is viable, I thought using a collection repeat along with infinite scroll would solve your issue of load times.

Collectives™ on Stack Overflow

ion-infinite scroll fail with ionic

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related