为什么 ngInfiniteScroll 不适用于表格？答案

【问题标题】：Why isn't ngInfiniteScroll working for tables?为什么 ngInfiniteScroll 不适用于表格？
【发布时间】：2017-01-22 16:20:19
【问题描述】：

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

<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()，但此后不再执行。

【问题讨论】：

你能告诉你无限滚动指令代码以便我可以帮助你吗？
@ManojPatidar 我没有制定这个指令。我正在使用外部包 - sroze.github.io/ngInfiniteScroll
您好像缺少infinite-scroll-distance（即infinite-scroll-distance="3"）
@RaphaelRafatpanah The docs 说这是可选的。 infinite-scroll-distance (optional)
@AkshayKhetrapal 请在定义和使用list 的地方发布控制器代码以及任何其他部分。您是否使用“Controller As”语法？谢谢。

标签： jquery angularjs infinite-scroll nginfinitescroll

【解决方案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

【讨论】：

那...不能解决我的问题，马修。我在上面提到过，getMoreItems() 并没有真正被触发。

【解决方案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;
}

【讨论】：