テーブルに対してngInfiniteScrollが機能しないのはなぜですか？

Question

私はテーブルにng-repeatを実装するために、<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は、ページロード時にを実行しますが、それ以降は実行しないため、正しく設定されています。あなたのHTMLで

Answer 1

問題に基づいて計算をスクロールする、ビューポートとありました。 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; 
} 

Answer 2

：

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

そして、あなたのgetMoreItems()メソッド内：

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

このworking example