Wie kann ich einen virtuellen Scroll mit angularJS erstellen?

Question

Ich versuche, eine Richtlinie zu machen, dass ich eine virtuelle Scroll tun kann, so wie es der Benutzer scrollt die Tabelle, die Tabelle „alte“ Ansichten entfernen und „neue“ Ansichten, Art wie die Sammlung wiederholen hinzufügen, aber ich war versagt, ich denke ich habe die Mathematik dahinter nicht verstanden, kann mir jemand helfen?

dies ist meine Richtlinie Code:

BaseModule.directive('myScroll', function() { 
    return { 
     restrict:"A", 
     scope:{ 
      rows:"=", 
      headers:"=" 
     }, 
     link: function(scope,el) { 
      var scrollTop = 0; 
      var scrollLeft = 0; 
      angular.element(el).on('scroll',function(){ 
       scrollTop = $(el).scrollTop(); 
       scrollLeft = $(el).scrollLeft(); 
       $(el).parent().find(".header").scrollLeft(scrollLeft); 
       var height = $(el).height(); 
       var numberOfRows = height/23; 
       var initialRow = scrollTop/23; 
       var html = ""; 
       for(i=0; i<numberOfRows;i++){ 
        var row = scope.rows[i+initialRow]; 
        html = html + addRow(row,i+initialRow); 
       } 
       $(el).find('.tbody-scroll').append(html); 
      }); 
      scope.$watch('rows',function(rows){ 
       var height = $(el).height(); 
       var numberOfRows = height/23; 
       var initialRow = scrollTop/23; 
       var html = ""; 
       for(i=0; i<numberOfRows;i++){ 
        var row = rows[i+initialRow]; 
        html = html + addRow(row,i+initialRow); 
       } 
       $(el).find('.tbody-scroll').append(html); 
      }); 
      var addRow = function(row,index){ 
       var html = ""; 
       var pos = 0; 
       var totalWidth = 0; 
       angular.forEach(row,function(col){ 
        var width = scope.headers[pos].width; 
        totalWidth = totalWidth + width; 
        html = html + "<span style='width:"+width+"px'>"+col.value+"</span>"; 
        pos++; 
       }); 
       html = "<div class='row' style='top:"+index*23+"px;width:"+totalWidth+"px;'>"+html; 
       html = html + "</div>"; 
       return html; 
      }; 
     } 
    }; 
}); 

<!-- my directive .html --> 
<div class="mTable"> 
    <div class="header" ng-style="headerWidth(headers())"> 
     <span ng-repeat="header in headers()" ng-style="widthStyle(header)"> 
      {{::header.label}} 
     </span> 
    </div> 
    <div class="tbody-container" my-scroll headers="headers()" rows="rows()"> 
     <div class="tbody-scroll" ng-style="scrollHeight(rows(),headers())"></div> 
    </div> 
</div> 

Answer 1

eine vollständige Antwort mit Code gibt vielleicht ein bisschen zu viel Mühe
Diese Bibliothek implementiert erfordern virtual scroll on ng-repeat https://github.com/stackfull/angular-virtual-scroll In der Beschreibung gibt es auch einen Artikel darüber, wie Sie diese Funktion selbst implementieren können.

Das grundlegende Konzept besteht darin, zwei divs zu machen, eine oberhalb und eine unterhalb der Liste, deren Größe durch die Anzahl der Elemente innerhalb der Liste bestimmt wird (dieser Ansatz hat eine Einschränkung, da Listenelemente entweder alle die gleiche Höhe oder aufweisen müssen) ihre Höhe muss fest) werden Sie dann Elemente löschen, wie sie aus dem Ansichtsfenster verschwinden und die divs die Größe Elemente nach der Anzahl der derzeit nicht gerendert und Ihre Position auf der Liste

Answer 2

keine direkte Antwort auf Ihre Frage, aber eine Alternative: Sie können an der ui-scroll directive aussehen wollen, die ein Ersatz für ng-repeat und hat eine ähnliche Funktion .

Beispiel in Ihrem Controller

$scope.movieDataSource = { 

    get : function (index, count, callback) { 
     var i, items = [$scope.userMovies], item; 

      var min = 1; 
      var max = 1000; 

     for (i=index ; i<index + count ; i++) { 
       if(i < min || i > max) { 
        continue; 
       } 
      item = { 
       title: $scope.userMovies.title, 
       imageURL: $scope.userMovies.poster_path 
      }; 
      items.push (item); 
     } 
     callback (items); 
    } 
} 

Und in der Ansicht:

<div ui-scroll="item in movieDataSource"> 
    {{item.title}} 
</div>