Angular Grid with Infinite Scroll

Description

Executes method on the controller when the user approaches the bottom of the page as they scroll.

Usage

Add the infinite-scroll attribute to the element that you have applied angular-grid to specifying the method on your controller to execute as the user approaches the bottom of the angular grid. If angular grid is being scrolled within a div set to overflow scroll or auto, add the infinite-scroll-container attribute specifying the selector of the element being scrolled.

Example

<md-content id="content-scroller">
  <div
    class="cards-wrap"
    angular-grid="vm.shots"
    grid-width="300"
    gutter-size="12"

    angular-grid-id="shots"
    infinite-scroll-container="#content-scroller"
    infinite-scroll="vm.loadMoreShots()">
    <div class="card" ng-repeat="shot in vm.shots track by shot.id">
      [...]
    </div>
  </div>
</md-content>
      

Demo

{{::shot.title}}