Come aumentare le prestazioni ng-repeat usando Smart-Table?

Question

Ho un problema di prestazioni e non trovo la soluzione.

Contesto: ho bisogno di visualizzare molti dati (500 linee, 8 colonne) in una tabella. Per visualizzare questi dati ho scelto di utilizzare Smart-table perché offre buone funzionalità, ma il problema è che ho molti dati e il tempo di visualizzazione dei dati è molto lungo (5 - 9 secondi, a seconda delle prestazioni del dispositivo).

Importante: ho bisogno di visualizzare tutti i dati, quindi non voglio il metodo di impaginazione, limitare il filtro.

Quindi questo codice sta lavorando:

<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> 

ho letto che ionico ha fatto una direttiva (collection-repeat) a scomparsa che permette un app per mostrare enormi liste di oggetti molto più performantly di NG-repeat. Così ho cercato di rifare la mia soluzione con la raccolta-repeat, ma questo non funziona ...

Codice soluzione di raccolta-repeat:

<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> 

Errore: Dimensione massima stack di chiamate superato

Domande: Esistono angularjs o soluzioni ioniche per aumentare le prestazioni di smart-table con molti dati? Cosa c'è di sbagliato nella mia collezione-ripetere?

Answer 1

Quale versione di Ionic stai usando? Se si utilizza la versione 1.0 beta 14 o successiva utilizzare bind once (nativo in Angular 1.3)

Vorrebbe che questo.

<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

Come stai caricando i tuoi dati?

Se si sta facendo un $scope.ColumnTable.push(newData);, questo non è un modo corretto per farlo.

Quello che faccio è:

• creare un servizio che caricare una tabella temporanea: chiamiamolo myService.setTable().

• Informare il vostro controller con un evento: Questo servizio invia un evento $rootScope.$broadCast("myService.setTable-refresh")

• Cattura l'evento nel controller & tabella di aggiornamento: $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

• Aggiornare il codice HTML per lavorare con myWorkingTable

Inoltre, è necessario definire una chiave univoca nel proprio ng-repeat per prestazioni o ottimizzazione utilizzata da track by per impedire la ricostruzione del contenuto già creato.

Vedi spiegazione qui: http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm