Jak zwiększyć wydajność powtarzania ng za pomocą inteligentnego stołu?

Question

Mam problem z wydajnością i nie znajduję rozwiązania.

Kontekst: Potrzebuję wyświetlić wiele danych (500 linii, 8 kolumn) w tabeli. Aby wyświetlić te dane, wybrałem Smart-table, ponieważ oferuje on dobrą funkcjonalność, ale problemem jest to, że mam dużo danych, a czas wyświetlania danych jest bardzo długi (5-9 sekundy, w zależności od wydajności urządzenia).

Ważna informacja: potrzebuję wyświetlić wszystkie dane, więc nie chcę metody paginacji, filtra limitów.

Więc ten kod działa:

<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" > 
      <table st-table="tableaux" class="table table-striped"> 
        <thead> 
         <tr> 
          <th ng-repeat="column in ColumnTable">{{column.Label}}</th> 
         </tr> 
         <tr> 
          <th ng-repeat="column in ColumnTable"> 
           <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="row in tableaux"> 
          <td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td> 
         </tr> 
        </tbody> 
       </table> 
    </ion-scroll> 

Czytałem, że jonowe wykonane dyrektywę (collection-repeat) wich umożliwia aplikacja pokazać ogromny listy przedmiotów znacznie więcej niż performantly NG-repeat. Więc próbowałem przerobić moje rozwiązanie z kolekcji powtarzać, ale to nie działa ...

Kod kolekcji powtórzyć rozwiązanie:

<ion-scroll class="scrollVertical"> 
     <table st-table="tableaux" class="table table-striped"> 
      <thead> 
       <tr> 
        <th ng-repeat="column in ColumnTable">{{column.Label}}</th> 
       </tr> 
       <tr> 
        <th ng-repeat="column in ColumnTable"> 
         <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr collection-repeat="row in tableaux" item-width="200px" item-height="100px"> 
        <td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </ion-scroll> 

Błąd: Maksymalny rozmiar stosu wywołań przekroczyła

pytania: Czy istnieje jakiś angularjs lub roztwór jonowy, aby zwiększyć wydajność inteligentnego stołu z dużą ilością danych? Co jest nie tak z moją kolekcją - powtórzenie?

Answer 1

Której wersji jonowej używasz? Jeśli używasz wersji 1.0 beta 14 lub wyższej użyj bind once (natywna w Angular 1.3)

Chciałbym jak to.

<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" > 
     <table st-table="tableaux" class="table table-striped"> 
       <thead> 
        <tr> 
         <th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th> 
        </tr> 
        <tr> 
         <th ng-repeat="column in ::ColumnTable"> 
          <input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/> 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="row in ::tableaux"> 
         <td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td> 
        </tr> 
       </tbody> 
      </table> 
</ion-scroll> 

Answer 2

Jak ładujesz swoje dane?

Jeśli robisz $scope.ColumnTable.push(newData);, to nie jest to właściwy sposób, aby to zrobić.

Co mogę zrobić, to:

• stworzyć serwis, który załadować tymczasowej tabeli: nazwijmy to myService.setTable().

• poinformować kontrolera ze zdarzenia: Usługa ta wysyła zdarzenie $rootScope.$broadCast("myService.setTable-refresh")

• połowu zdarzenie do swojego kontrolera & aktualizacji tabeli: $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

• zaktualizować swój HTML pracować myWorkingTable

Ponadto, należy zdefiniować unikatowy klucz w swoim ng-repeat dla wydajności o ptimizacja używana przez track by, aby zapobiec przebudowie już utworzonej treści.

Patrz wyjaśnienie tutaj: http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm