ngGridEventScroll'de sayfa kaydırma nasıl kullanılır?

Question

ngGrid v2.X kullanarak, sayfa kaydırma (kılavuz kaydırma değil) altta olduğunda daha fazla veri yükleyen bir ızgarayı devralmaya çalışıyorum.

benzer soruları arayarak benim 1 sorununa bir çözüm bulduk: ngGrid dinamik yüksekliğe olmalıdır , bu yüzden beni alır bu

.ngViewport{ height:auto !important; } .ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel { width: 100% !important; } .ngRow { border-bottom:none !important; } 

yaptılar ettik benim 2. sorun. Veri kaydırma yüklenmesini olması gerekir ve ben buldum: ngGridEventScroll ama o nly ngGrid stajyer kaydırma kullanıldığında, ben

$scope.$on('ngGridEventScroll', function() { 
     $scope.currentDataPosition++; 
     $scope.setPagingData($scope.dataArray, $scope.currentDataPosition, $scope.pagingOptions.pageSize); 
    }); 

Peki, çözüm 1, kırar sayfa kaydırma ihtiyaç tetikler Çözüm 2, çünkü ngGridEventScroll artık internette kaydırma yapmıyor.

$scope.setPagingData = function (data, page, pageSize) { 
     cfpLoadingBar.start(); 
     var pagedData = data.slice((page - 1) * pageSize, page * pageSize, page * pageSize); 
     $scope.totalServerItems = data.length; 
     $scope.myData = pagedData; 
     cfpLoadingBar.complete(); 
    }; 

$scope.gridOptions = { 
     data: 'myData', 
     virtualizationThreshold: 50, 
     enableRowSelection: false, 
     enablePaging: false, 
     enableSorting: false, 
     showFooter: false, 
     pagingOptions: $scope.pagingOptions, 
     filterOptions: $scope.filterOptions, 
    } 

Ne yapılabilir?

Answer 1

ngInfiniteScroll'u (https://sroze.github.io/ngInfiniteScroll/index.html) kullanabilir ve aşağıdaki stratejiyi uygulayabilirsiniz. HTML'nize olarak Kumandanızda

$scope.limit = 50; // Initial limit (make sure its enough to cover the whole page, otherwise the raiseLimit function might not be called) 
    $scope.raiseLimit = function() { // function called by ngInfiniteScroll 
     if ($scope.limit < data.length) { 
      $scope.limit += 10; // adjust to your need 
     } else { 
      $scope.dataLoaded = true; 
     } 
    } 
    $scope.dataLoaded = false; // prevent useless call 
    $scope.myData = $filter('limitTo')(data, $scope.limit); // Do not forget to inject $filter into your controller 

yılında

<div infinite-scroll='raiseLimit()' infinite-scroll-disabled='dataLoaded'> 
     <!-- put your grid with dynamic height here --> 
    </div>