Why isn't ngInfiniteScroll working for tables?

Question

I am trying to implement ngInfiniteScroll on my table with ng-repeat on <tbody> However, it doesn't get triggered when I reach the end of page.

<div infinite-scroll="list.getMoreItems()">
    <table md-table md-row-select>
        <thead md-head>
           <tr md-row>
                <th md-column><span>Id</span></th>
                <th md-column><span>Item</span></th>
            </tr>
        </thead>
       <tbody md-body ng-repeat="data in list.items">
           <tr md-row><td md-cell>{{data.title}}</td></tr>
           <tr md-row><td md-cell>Click here </td></tr>
       </tbody>
   </table>
</div>

My getMoreItems() does nothing more than throw an alert for now.

ngInfiniteScroll is configured correctly as it does execute getMoreItems() on page load but never after that.

can you show you infinit-scroll directive codeso i can help you ? — Manoj Patidar, Jan 22 '17 at 16:29
@ManojPatidar I haven't made this directive. I am using an external package - https://sroze.github.io/ngInfiniteScroll/ — Akshay Khetrapal, Jan 22 '17 at 16:30
It looks like you are missing `infinite-scroll-distance` (i.e. `infinite-scroll-distance="3"`) — Raphael Rafatpanah, Jan 22 '17 at 16:31
@RaphaelRafatpanah [The docs](https://sroze.github.io/ngInfiniteScroll/documentation.html) says that's optional. `infinite-scroll-distance (optional)` — Matthew Cawley, Jan 22 '17 at 16:35
@AkshayKhetrapal Please can you post the Controller code along with any other parts wherever `list` is defined and used. Are you using "Controller As" syntax? Thanks. — Matthew Cawley, Jan 23 '17 at 09:44

score 1 · Answer 1 · answered Jan 22 '17 at 16:48

1

In your HTML:

<tbody md-body ng-repeat="data in list.items | limitTo:barLimit">

And within your getMoreItems() method:

$scope.barLimit = 100;
$scope.getMoreItems = function () {
    $scope.barLimit += 50;
}

Based on this working example

answered Jan 22 '17 at 16:48

Matthew Cawley

2,638
1
6
19

That... doesn't solve my problem, Matthew. I've mentioned above, `getMoreItems()` doesn't really get triggered. – Akshay Khetrapal Jan 23 '17 at 09:04

score 1 · Accepted Answer · answered Jan 24 '17 at 08:33

The issue was with the viewport to scroll calculation. Removing overflow-y:hidden from the container that contains ng-repeat solved the problem.

<div id="holdList" infinite-scroll="list.getMoreItems()">
    <table md-table md-row-select>
        <thead md-head>
           <tr md-row>
                <th md-column><span>Id</span></th>
                <th md-column><span>Item</span></th>
            </tr>
        </thead>
       <tbody md-body ng-repeat="data in list.items">
           <tr md-row><td md-cell>{{data.title}}</td></tr>
           <tr md-row><td md-cell>Click here </td></tr>
       </tbody>
   </table>
</div>


#holdList
{
   height: 100%;
   overflow: auto;
}

Why isn't ngInfiniteScroll working for tables?

2 Answers2