爲什麼ngInfiniteScroll不能用於表格？

我試圖在我的表上使用ng-repeat在<tbody>上實現ngInfiniteScroll。但是，當我到達頁面末尾時，它不會被觸發。爲什麼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()，但從未在此之後。

來源

2017-01-22 Akshay Khetrapal

你能告訴你infinit-scroll指令codeso我可以幫你嗎？ –

@ManojPatidar我還沒有這個指令。我正在使用一個外部包 - https://sroze.github.io/ngInfiniteScroll/ –

它看起來像你缺少'無限滾動距離'（即'無限滾動距離=「3」'） –

的問題是與視滾動計算。從包含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; 
}

來源

2017-01-24 08:33:34

在HTML：

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

而且你getMoreItems()方法中：

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

在此基礎上working example

來源

2017-01-22 16:48:55

馬修，這......並沒有解決我的問題。我剛纔提到，'getMoreItems（）'並不真正被觸發。 –

爲什麼ngInfiniteScroll不能用於表格？

回答

相關問題