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?