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

Answer 1

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);
});

ion-infinite scroll fail with ionic

Question

1 answers

solution1
1 2015-06-30 15:08:38

ion-infinite scroll fail with ionic

Question

1 answers

solution1 1 2015-06-30 15:08:38

solution1
1 2015-06-30 15:08:38