为什么 ngInfiniteScroll 不适用于表格？

Question

我正在尝试在 table 上实现 ngInfiniteScroll，在 <tbody> 上实现 ng-repeat 但是，当我到达页面末尾时它不会被触发。

<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>

我的getMoreItems()暂时只是发出警报。

ngInfiniteScroll 配置正确，因为它确实在页面加载时执行 getMoreItems()，但之后再也不会执行。

Answer 1

在你的HTML中：

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

在您的 getMoreItems() 方法中：

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

基于此working example

Answer 2

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

<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;
}

为什么 ngInfiniteScroll 不适用于表格？

Why isn't ngInfiniteScroll working for tables?

jquery

angularjs

infinite-scroll

nginfinitescroll