Infinite Scroll

[s-yadav]

This issue been seperated out from #14 . As we were trying to solve two different problem there.

[s-yadav]

Check a fork to support infinite scrol by @acondiff https://github.com/acondiff/angulargrid/blob/master/angulargrid.js, and example on codepen: http://codepen.io/acondiff/pen/yepggM .

[s-yadav]

Also check an example to use angulargrid with ngInfiniteScroll (http://sroze.github.io/ngInfiniteScroll/) . Codepen http://codepen.io/s-yadav/pen/EPoOZo

[austincondiff]

@s-yadav I really like your codepen fork using ngInfiniteScroll. I agree with you now that I think about it. Why reinvent the wheel if you don't have to. :)

[helloflow]

Really nice implementation with ngInfiniteScroll! However for some reason I can't make it work without angular-material. The infinite-scroll function is not firing when I try to set it up without angular-material. Any thoughts on this?

Are you planning to include this feature in the master branch so I can safely rely on my bower implementation?

Thanks-a-lot!

[s-yadav]

@helloflow http://codepen.io/s-yadav/pen/EPoOZo Link has been updated to not to use ngInfiniteScroll, as ngInfiniteScroll will not work with a custom scroll. So added a minimal infinteScroll check on angulargrid itself, You can use angulargrid code from codepen example without ngInfinteScroll. Will update on the master branch once other issues been resolved and checked.

[alereisan]

@s-yadav I implemented exactly as in the codepen, also tried it with overflow:auto div. but i can't get infinite-scroll="vm.loadMoreShots()" to fire when my grid is scrolled to the bottom.

[austincondiff]

@alereisan Does you have a vm.loadMoreShots() method in your controller? Does it return a promise? Here is an example of the controller. Note that the method name is inconsequential.

app.controller('MainCtrl', function($scope, $http, $q) {
  var vm = this;
  $scope.card = {};
  $scope.card.title = '';
  vm.page = 0;
  vm.shots = [];
  vm.loadingMore = false;

  vm.loadMoreShots = function() {

    if(vm.loadingMore) return;
    vm.page++;
    vm.loadingMore = true;
    var promise = $http.get('https://api.dribbble.com/v1/shots/?per_page=24&page='+vm.page+'&access_token=3df6bcfc60b54b131ac04f132af615e60b0bd0b1cadca89a4761cd5d125d608f');
    promise.then(function(data) {

      var shotsTmp = angular.copy(vm.shots);
      shotsTmp = shotsTmp.concat(data.data);
      vm.shots = shotsTmp;
      vm.loadingMore = false;

    }, function() {
      vm.loadingMore = false;
    });
    return promise;
  };

  vm.loadMoreShots();

});

[s-yadav]

@acondiff @alereisan So finally infiniteScroll is now bundled with angulargrid - 0.5.1. Use the master branch and check http://ignitersworld.com/lab/angulargrid/#infinte-scroll for example.

[alereisan]

@acondiff Yes, I used almost exactly the same setup like in the codepen, just with my own backend. When I refresh the page, the first 10 results (Page 1) are loaded. But when I scroll down to the end of "Page 1" it does not send a get "Page 2" request to the backend. (nothing seems to happen here anymore).

(Have not tried with new update / documentation yet, doing this now)

[alereisan]

After updating, it sends the request when scrolling, but it doesn't work as expected yet:

Why is it sending requests for page 1 (1.json) again, directly after it requests page 2? This also causes that no grid item is displayed anymore - also page 1 items dissapear.

[austincondiff]

@alereisan Can I see your method in your controller and your html in your view?

[alereisan]

HTML:

      <!-- Feed  -->
      <div layout-padding ng-controller="AuctionCtrl as vm">
        <ul class="dynamic-grid" ag-infinite-scroll="vm.loadMoreShots()" angular-grid="vm.shots" ag-performant-scroll="false" ag-id="shots" ag-grid-width="230" ag-refresh-on-img-load="true" ag-gutter-size="10" style="margin: 0;">
          <li ng-repeat="auction in vm.shots" class="grid">
            <div ng-include="'auctions/_auction-card.html'"></div>
          </li>
        </ul>
        <div class="loading-more-indicator" ng-show="vm.loadingMore">
          <md-progress-circular md-mode="indeterminate" md-diameter="128" class="progress-swatch"></md-progress-circular>
        </div>
      </div>

Controller:

    // Infinite Scroll Feed
    var vm = this;

    vm.page = 0;
    vm.shots = [];
    vm.loadingMore = false;

    vm.loadMoreShots = function() {
      console.log("Trying to load more Shots...");
      if(vm.loadingMore) {return};
      vm.page++;
      //var deferred = $q.defer();
      vm.loadingMore = true;
      var promise = $http.get('/auctions/feed/'+vm.page+'.json');
      promise.then(function(data) {

        var shotsTmp = angular.copy(vm.shots);
        shotsTmp = shotsTmp.concat(data.data);
        vm.shots = shotsTmp;
        vm.loadingMore = false;

      }, function() {
        vm.loadingMore = false;
      });
      return promise;
    };

    vm.loadMoreShots();

[s-yadav]

You have not defined a scroll container, are you sure scroll is on body level?. If any of parent have overflow scroll you have to define that element as scroll container.

[alereisan]

I changed my layout a little bit, now I have a<md-content id="content-scroller">, added ag-scroll-container="#content scroller". but now i get this:

[austincondiff]

Replace ag-scroll-container="#content scroller" with ag-scroll-container="#content-scroller". You just need to replace the space with a dash.

[alereisan]

actually I have ag-scroll-container="#content-scroller" in my code, just forgot it here because I wrote it instead of copy pasteing it. Same problem ..

[alereisan]

Ok, writing it like: ag-scroll-container="'#content-scroller'" with two extra ' solved this error, but then I get the same result as before (Page 1 shows up, but when scrolling everything disappears, request to get page 2 happens, and then multiple get page 1 requests, see my first screenshot above)

[alereisan]

I found the problem: <div ng-include="'auctions/_auction-card.html'"></div> - without ng-include it works.

Do you know why?