使用$ http請求的角度材質自動完成無限滾動

Question

自動完成是否支持來自遠程源的無限滾動？ 這種情況是這樣的。用戶輸入幾個字母，自動完成過濾掉結果。結果仍然太大，不適合結果區域。 用戶想要滾動「返回的結果」。 我發現這種情況很直接，但是，我什麼也沒有發現在線。

請指教。

Answer 1

我想我們需要用自定義指令來滿足您的要求。

我已經創建了指令，它實際上綁定了「md-virtual-repeat-container」上的滾動事件，該事件在渲染後保存了項目列表。

JS

你的指令就會像下面。這個指令的目的是當用戶到達滾動結束時獲得滾動事件和呼叫附加功能。條件「new Date（）。getTime（） - now> 100」將充當節流API調用。如果您希望在100毫秒的用戶操作之間限制您的API調用，則可以將節流時間從100毫秒更改爲任意毫秒。

.directive('lazyLoadData', function($compile) { 
    return { 
     link: function(scope, el, attrs) { 
      var now = new Date().getTime(); 
      var rep = angular.element(document.getElementsByClassName("md-virtual-repeat-scroller")); 
      rep.on('scroll', function(evt){ 
       if (rep[0].scrollTop + rep[0].offsetHeight >= rep[0].scrollHeight) 
        if (new Date().getTime() - now > 1000) {     
        now = new Date().getTime(); 
        scope.$apply(function() { 
         scope.$eval(attrs.lazyLoadData); 
        }); 
        }     
      }); 
     } 
    }; 
}); 

HTML 你的HTML會喜歡下面，

<md-autocomplete flex 
       md-selected-item="ctrl.selectedItem" 
       md-search-text="searchText" 
       md-items="item in querySearch(searchText)" 
       md-item-text="item.login" 
       md-delay="300" 
       md-floating-label="Search Github Users" 
       lazy-load-data="querySearch()" <!--New directive will go here --> 
> 
    <div layout="row" class="item" layout-align="start center"> 
     <img ng-src="{{item.avatar_url}}" class="avatar" /> 
     &nbsp;&nbsp; 
     <span md-highlight-text="searchText">{{item.login}}</span> 
    </div> 
</md-autocomplete> 

這裏是DEMO

*請注意：目前我追加相同的數據我的記錄數組，因爲我沒有實際的API。但是，您可以擴展您的API以根據搜索到的文本獲取分頁記錄。請參閱https://github.com/davidchin/angular-endless-scroll或http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html