angularjs - 带有 $http 请求的 Angular Material 自动完成无限滚动

Question

自动完成是否支持从远程源无限滚动？
场景是这样的。用户键入几个字母，自动完成过滤掉结果。结果仍然太大而无法放入结果区域。
用户想要滚动“返回结果”。
我发现这种情况非常简单，但是，我在网上一无所获。

请指教。

Answer 1

我想我们需要根据您的要求使用自定义指令。

我创建了指令，它实际上在“md-virtual-repeat-container”上绑定(bind)滚动事件，该指令在渲染后保存项目列表。

JS

您的指令将如下所示。该指令的目的是在用户到达滚动结束时获取滚动事件并调用附加函数。条件“new Date().getTime() - now > 100”将充当节流 API 调用。如果您想将 API 调用限制在 100 毫秒的用户操作之间，您可以将节流时间从 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