1

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.

4

2 回答 2

1

在您的 HTML 中：

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

在你的getMoreItems()方法中：

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

基于这个工作示例

于 2017-01-22T16:48:55.277 回答
1

问题在于滚动计算的视口。overflow-y:hidden从包含 ng-repeat 的容器中删除解决了该问题。

<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;
}
于 2017-01-24T08:33:34.677 回答