Come utilizzare lo scroll delle pagine su ngGridEventScroll?

Question

Utilizzando ngGrid v2.X, sto provando a sviluppare una griglia che carica più dati quando lo scorrimento della pagina (non lo scorrimento della griglia) scende.

Con la ricerca di domande simili ho trovato una soluzione al mio problema 1 °: ngGrid deve avere un'altezza dinamica, così ho fatto questo

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

Il che mi porta alla mia 2 ° problema. Ho bisogno di dati siano caricamento da scorrimento, e ho trovato: ngGridEventScroll, ma o innesca olo quando viene utilizzata ngGrid stagista di scorrimento, ho bisogno di scorrimento della pagina

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

Quindi, la soluzione 1, rompe il soluzione 2, perché ngGridEventScroll non ha più lo scroll interno.

$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, 
    } 

Cosa si può fare?

Answer 1

È possibile utilizzare ngInfiniteScroll (https://sroze.github.io/ngInfiniteScroll/index.html) e applicare la seguente strategia.

Nel vostro controller

$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 

nel tuo html

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