Wie kann die ng-repeat-Leistung mit Smart-Table gesteigert werden?

Question

Ich habe ein Problem der Leistung und ich finde die Lösung nicht.

Kontext: Ich muss eine Menge Daten (500 Zeilen, 8 Spalten) in einer Tabelle anzeigen. Um diese Daten anzuzeigen, wählte ich Smart-Tabelle, weil es eine gute Funktionalität bietet, aber das Problem ist, dass ich eine Menge Daten habe und die Zeit der Datenanzeige sehr lang ist (5 - 9 Sekunden, abhängig von der Geräteleistung).

Wichtige Sache: Ich muss alle Daten anzeigen, so dass ich keine Paginierung Methode, Filter begrenzen möchte.

Also dieser Code funktioniert:

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

ich gelesen, dass Ionic eine Richtlinie gemacht (collection-repeat) wich ermöglicht eine App riesige Listen von Elementen zu zeigen, viel mehr performant als ng-repeat. Also habe ich versucht, meine Lösung mit sammel wiederholen Remake aber das nicht funktioniert ...

-Code Sammlung-repeat Lösung:

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

Fehler: Maximale Call-Stack-Größe überschritten

Fragen: Gibt es eine angularjs oder ionische Lösung, um die Leistung von Smart-Table mit vielen Daten zu erhöhen? Was stimmt nicht mit meiner Sammlung-wiederholen?

Answer 1

Welche Version von Ionic verwenden Sie? Wenn Sie Version 1.0 Beta 14 oder höher verwenden, verwenden Sie bind once (nativ in Angular 1.3)

Es wäre so.

Answer 2

Wie laden Sie Ihre Daten?

Wenn Sie eine $scope.ColumnTable.push(newData); tun, dann ist dies kein geeigneter Weg, es zu tun.

Was ich tue, ist:

• einen Dienst erstellen, die eine temporäre Tabelle zu laden: Lassen Sie uns es nennen myService.setTable().

• Informieren Sie Ihren Controller mit einem Ereignis: Dieser Dienst sendet ein Ereignis $rootScope.$broadCast("myService.setTable-refresh")

• Fang das Ereignis in Ihrem Controller & Aktualisierungstabelle: $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

• Aktualisieren Sie Ihre HTML arbeiten mit myWorkingTable

Darüber hinaus müssen Sie einen eindeutigen Schlüssel in Ihre ng-repeat für Leistung o definieren ptimization von track by verwendet, um die Neuerstellung bereits erstellter Inhalte zu verhindern.

Siehe Erläuterung hier: http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm