मैं 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 पर आभासी स्क्रॉल भी इस सुविधा को कार्यान्वित करने के तरीके पर एक लेख भी है।

मूल अवधारणा दो divs, एक ऊपर और एक सूची के नीचे एक बनाने के लिए है, जो आकार सूची के अंदर तत्वों की संख्या द्वारा निर्धारित किया जाता है (इस दृष्टिकोण की सीमा है क्योंकि सूची तत्वों के पास सभी समान ऊंचाई होनी चाहिए या उनकी ऊंचाई तय की जानी चाहिए), फिर आप व्यूपोर्ट से गायब होने के बाद तत्वों को हटाते हैं और वर्तमान में प्रस्तुत किए गए तत्वों की संख्या के अनुसार divs का आकार बदलते हैं और सूची में आपकी स्थिति

Answer 2

नहीं अपने प्रश्न के लिए एक सीधा जवाब है, लेकिन एक विकल्प:

यह मेरा निर्देश कोड है आप 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>