Angular Material自动完成无限滚动,带有$ 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