angularjs - How to create grid list of infinitely scrollable data? -
i working on building web page display grid list of infinitely scrollable products. have implemented following markup achieve :
<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 code forms part of md-tab-body
)
the problem facing here function loadmore()
gets called automatically. doesn't wait me scroll bottom of page. how solve issue? loadmore()
misplaced in html?
check https://material.angularjs.org/latest/api/directive/mdvirtualrepeat
from material.angular.org
md-virtual-repeat specifies element repeat using virtual scrolling.
virtual repeat limited substitute ng-repeat renders enough dom nodes fill container , recycling them user scrolls. arrays, not objects supported iteration. track by, alias, , (key, value) syntax not supported.
Comments
Post a Comment