1

I am working on building a web page that will display a grid list of infinitely scrollable products. I have implemented the following markup to achieve this :

<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
    <div  infinite-scroll="loadMore()" infinite-scroll-disabled="busy">
        <md-grid-tile ng-repeat="p in products">
            <md-grid-tile-header>
                <h3>{{p.id}}</h3>
            </md-grid-tile-header>
        </md-grid-tile>
    </div>
</md-grid-list>

(All this code forms a part of a md-tab-body)

The problem I am facing here is that the function loadMore() gets called automatically. It doesn't wait for me to scroll to the bottom of the page. How do I solve this issue? Is loadMore() misplaced in my HTML?

ryanyuyu
  • 5,999
  • 10
  • 46
  • 47
Sohan Shirodkar
  • 510
  • 3
  • 23

1 Answers1

-1

Check https://material.angularjs.org/latest/api/directive/mdVirtualRepeat

From material.angular.org

md-virtual-repeat specifies an element to repeat using virtual scrolling.

Virtual repeat is a limited substitute for ng-repeat that renders only enough dom nodes to fill the container and recycling them as the user scrolls. Arrays, but not objects are supported for iteration. Track by, as alias, and (key, value) syntax are not supported.

Danilo Velasquez
  • 421
  • 2
  • 11