どのようにすれば、angularJSで仮想スクロールできますか？

Question

私は仮想スクロールを行うことができるという指示を出しています。ユーザーがテーブルをスクロールすると、テーブルは古いビューを削除し、コレクションの繰り返しのような「新しい」ビューを追加します。失敗、私はそれの背後にある数学を理解していないと思う誰かが私を助けることができますか？

これは私の命令コードです：

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

このライブラリを実装ng-repeatの仮想スクロールhttps://github.com/stackfull/angular-virtual-scrollの説明には、この機能を自分で実装する方法の記事もあります。

基本的な考え方は、リスト内の要素の数によって決定されるリストの上と下の2つのdivを作成することです（この方法は、リスト要素がすべて同じ高さであるか、その高さは固定されていなければなりません）、ビューポートから消えた要素を削除し、現在レンダリングされていない要素の数とリスト上の位置に従ってdivをサイズ変更します

Answer 2

ないあなたの質問に直接答えが、代替：あなたはNGリピートの代替品であり、同様の機能を持っているui-scroll directiveを見てみたいことがあり。

例お使いのコントローラ

$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); 
    } 
} 

でそして、あなたのビューで ：努力のあまりビットを必要とするかもしれないコードとの完全な答えを与える

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