Ionic Infinite Scroll with http

Question

what wrong in my code guy? i get data using API, and then when infinite scroll, API data instantly appears before the scroll

<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title"><span class="badge badge-assertive">{{items.length}}</span> Items loaded</h1>
    </ion-header-bar>

    <ion-content>

      <ion-list>
        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}">
          Item {{ item }}
        </ion-item>
      </ion-list>
      <ion-infinite-scroll
        on-infinite="loadMore()"
        distance="10%">
      </ion-infinite-scroll>
    </ion-content>

JS

.controller('MyCtrl', function($scope,$http) {

     $http.get("#",{withCredentials: true})
        .success(function(response){
            $scope.items=response.products;
        }).error(function(response)
            {
                $scope.status = response || "Request failed";
            });

  $scope.items = [];
  $scope.loadMore = function() {

var data = [];

var l = $scope.items.length

    for ( var i = l; i < l+5; i++) {
      data.push(i);
    }
    $scope.$apply(function () {
      $scope.items = $scope.items.concat(data);
    });
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };


});

im follow this code http://codepen.io/shprink/pen/jukJh

Answer 1

<ion-infinite-scroll ng-if="isMoreItems" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

See above syntax, the difference is ng-if="isMoreItems" .

Now in your controller.

declare it $scope.isMoreItems = false; in the top. and put a check like

var l = $scope.items.length
if(l == 0){
  $scope.isMoreItems = false;
}else{
   for ( var i = l; i < l+5; i++) {
      data.push(i);
   }
   $scope.$apply(function () {
     $scope.items = $scope.items.concat(data);
   });

   $scope.isMoreItems = true;

   $scope.$broadcast('scroll.infiniteScrollComplete');
}

Some points to remember:

Get paginated data from your http request
Manage isMoreItems variable in code according to your requirement
Make the call of $scope.$broadcast('scroll.infiniteScrollComplete'); whenever scroll load finishes.

If you follow above points, your problem should solve.

Answer 2

Look at this ...

var offset = 1; 
var max = 10; 
var customer = 2;
vm.customerList = [];
var url= '/some/some/?customer='+'customer'+'&offset='+offset+'&max='+max;
$http.get(url).success(function (response) { 
var customerResponse = response.data;    
angular.forEach(customerResponse,function(response){    
vm.customerList.push(response);  
$scope.$broadcast('scroll.infiniteScrollComplete'); });
        }).error(function (err) {
    $scope.$broadcast('scroll.infiniteScrollComplete');
      })

Ionic Infinite Scroll with http

Question

2 answers

solution1
0 2015-11-18 06:14:04

solution2
0 2017-10-26 01:03:46

Ionic Infinite Scroll with http

Question

2 answers

solution1 0 2015-11-18 06:14:04

solution2 0 2017-10-26 01:03:46

solution1
0 2015-11-18 06:14:04

solution2
0 2017-10-26 01:03:46