ng-repeat zeigt schreckliche Leistung mit großen Listen

Question

Ich habe Leistungsprobleme bei der Verwendung von ng-repeat für lange Listen (Tausende von Datensätzen), die innerhalb einer Tabelle angezeigt werden müssen. Hier

ist die HTML Ich verwende:

<table class="table table-hover"> 
     <thead> 
      <tr> 
       <th ng-repeat="One_Header in Data_List.Header track by $index">{{One_Header}}</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-model="Data_List" ng-repeat="One_Source in Data_List.Body track by $index" style="cursor:pointer"> 
       <td ng-repeat="One_Data_Field in One_Source track by $index">{{One_Data_Field}}</td> 
      </tr> 
     </tbody> 
    </table> 

Die JSON erhalten (dauert ca. 1 Sekunde vom Server zu erhalten) enthält die Daten wie folgt:

"Data":{ 
     "Header":["Title_1","Title_2","Title_3"], 
     "Body":[ 
       ["Rec_1_Data_1","Rec_1_Data_2","Rec_1_Data_3"], 
       ["Rec_2_Data_1","Rec_2_Data_2","Rec_2_Data_3"], 
       ["Rec_3_Data_1","Rec_3_Data_2","Rec_3_Data_3"], 
       : 
       ["Rec_n_Data_1","Rec_n_Data_2","Rec_n_Data_3"] 
       ] 
} 

ich auch versuchte eine einseitige Bindung (dh {{::One_Data_Field}}) ohne irgendeine merkliche Verbesserung.

Wie oben erwähnt, kommt die Antwort innerhalb einer Sekunde an und es dauert bis zu 10 Sekunden, bis die Tabelle erstellt ist.

Jeder Vorschlag wird sehr geschätzt.

Answer 1

Um die Leistung zu verbessern, können Sie Paginierungsdirektiven verwenden, die mit angular js erstellt wurden.

Angular-Paging

pagination

Wenn Sie Angular-Material-Design verwenden, dann würde ich sehr

virtual repeat

Answer 2

mit virtueller Wiederholung empfehlen können Sie diese Probe Paginierung Implementierung versuchen:

 var pageSize = 15; 
     $scope.paginationLimit = function(pagesShown) { 
      return pageSize * pagesShown.count; 
     }; 

     $scope.hasMoreItemsToShow = function(list, pagesShown) { 
      return pagesShown.count < (list.length/pageSize); 
     }; 

     $scope.showMoreItems = function(pagesShown) {    
      pagesShown.count = pagesShown.count + 1; 
     }; 



     <tr ng-model="Data_List" ng-repeat="One_Source in Data_List.Body track by $index " style="cursor:pointer"> 
      <td ng-repeat="One_Data_Field in One_Source track by $index | limitTo: paginationLimit(pagesShown)">{{One_Data_Field}}</td> 
     </tr> 

     //sample row with show more button 
     <tr class="showMore">     
      <td></td> 
      <td class="showBtn"> 
       <button type="button" class="btn btn-primary btn-lg" ng-init="pagesShown={'count': 1}" ng-click="showMoreItems(pagesShown)" ng-show="hasMoreItemsToShow(One_Source track, pagesShown)">Show More</button> 
      </td>    
      <td></td> 
     </tr>