Material angular autocompletar desplazamiento infinito con solicitud $ http

Solución:

Supongo que debemos ir con una directiva personalizada para sus necesidades.

He creado una directiva que enlaza el evento de desplazamiento en “md-virtual-repeat-container” que contiene la lista de elementos después de la renderización.

JS

Su directiva será como la siguiente. El propósito de esta directiva es obtener un evento de desplazamiento y llamar a la función adjunta cuando el usuario llega al final del desplazamiento. La condición “new Date (). GetTime () – now> 100” actuará como una llamada a la API del acelerador. Puede cambiar el tiempo de aceleración de 100 milisegundos a cualquier ms si desea limitar las llamadas a la API entre 100 milisegundos de acción del usuario.

.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
A su html le gustará lo siguiente,

<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="https://foroayuda.es/{{item.avatar_url}}" class="avatar" />
      &nbsp;&nbsp;
      <span md-highlight-text="searchText">{{item.login}}</span>  
   </div>
</md-autocomplete>

Aquí está MANIFESTACIÓN

*Tenga en cuenta Actualmente estoy agregando los mismos datos a mi matriz de registros porque no tengo una API real. Pero puede ampliar su API para obtener registros paginados basados ​​en el texto buscado. Consulte https://github.com/davidchin/angular-endless-scroll O http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html

---

---

Utiliza Nuestro Buscador