Angular Material Autocomplete Infinite Scroll mit $ http Anfrage

Question

Unterstützt Autocomplete unendliche Scroll von einer Remote-Quelle? Das Szenario ist so. Der Benutzer tippt wenige Buchstaben, die Autocomplete filtert das Ergebnis heraus. Dennoch ist das Ergebnis zu groß, um in den Ergebnisbereich zu passen. Der Benutzer möchte das "zurückgegebene Ergebnis" scrollen. Ich finde dieses Szenario sehr einfach, aber ich habe nichts online gefunden.

Bitte beraten.

Answer 1

Ich denke, wir müssen mit benutzerdefinierten Richtlinie für Ihre Anforderung gehen.

Ich habe eine Direktive erstellt, die scroll-Ereignis auf "md-virtual-repeat-container" bindet, das die Elementliste nach dem Rendern enthält.

JS

Ihre Richtlinie wird wie unten sein. Zweck dieser Direktive ist scroll ereignis und call attached function, wenn der Benutzer am Ende des Bildlaufs erreicht. Bedingung "new Date(). GetTime() - jetzt> 100" wird als ein Drosselung API Anruf fungieren. Sie können die Drosselungsdauer von 100 Millisekunden auf beliebige Millisekunden ändern, wenn Sie Ihre API-Aufrufe auf 100 Millisekunden Benutzeraktion begrenzen möchten.

.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 Ihre html wie unten mögen,

<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> 

Hier ist DEMO

* Bitte beachten Sie zur Zeit i gleichen Daten an meine Platten-Array am anhängt, weil Ich habe keine tatsächliche API. Sie können jedoch Ihre API erweitern, um seitenbezogene Datensätze basierend auf dem gesuchten Text zu erhalten. Siehe https://github.com/davidchin/angular-endless-scrollODERhttp://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html