Reputation: 6031
I am using infinite scroll from http://binarymuse.github.io/ngInfiniteScroll v1.1.0. I have a table whose contents will be loaded dynamically as the user scrolls down.
I did the same thing in this plunk which pushes data inside the array which is displayed inside a div and it works fine as expected.
When I tried to do the same on other page, showMore() function is called not only on scrolling down but also when scrolling up. Here the structure of the table.
<table>
<thead>
<tr>
<th>Some heading</th>
<th>Some other heading</th>
</tr>
</thead>
<tbody>
<div infinite-scroll="showMore()" infinite-scroll-distance="3" infinite-scroll-disabled='infiniteScrollDisabled'>
<tr ng-repeat="r in report">
<td>{{$index}}</td>
<td">{{r.someData}}</td>
</tr>
</div>
</tbody>
</table>
I dont understand why showMore()
function is called even on scrolling up. Has it anything to do with the table structure ?
Upvotes: 1
Views: 2385
Reputation: 2158
I found this issue on github and it solved it for me https://github.com/sroze/ngInfiniteScroll/issues/157
<div class="constrained" ng-controller="MyCtrl">
<table infinite-scroll="increaseLimit()" infinite-scroll-container='".constrained"'>
<tr ng-repeat="item in items | limitTo:barLimit">
<td>Number</td>
<td>{{item.number}}</td>
</tr>
</table>
</div>
credit: BenjaminWFox
This jsFiddle demonstrates this (along with filtering etc) https://jsfiddle.net/lisapfisterer/Lu4sbxps/
Upvotes: 0
Reputation: 6031
The solution is to move
<div infinite-scroll="showMore()" infinite-scroll-distance="3" infinite-scroll-disabled='infiniteScrollDisabled'>
outside the <table>.....</table>
tags.
Upvotes: 2