Smart-Table kullanarak ng-yineleme performansı nasıl artırılır?

Question

Performans sorunum var ve çözümü bulamıyorum.

Bağlam: Tabloda çok fazla veri (500 satır, 8 sütun) göstermem gerekiyor. İyi bir işlevsellik sunması nedeniyle Akıllı tabloyu kullanmak için seçtiğim bu veriyi görüntülemek için ama çok fazla veriye sahip olduğum ve veri görüntüleme süresinin çok uzun olduğu (5 - 9 saniye, bu cihaz performansına bağlı).

Önemli olan: Tüm verileri görüntülemem gerekiyor, bu yüzden sayfalama yöntemini ve filtreyi sınırlamak istemiyorum.

Yani bu kod çalışıyor:

Ben İon bir talimatı yapılan okumak

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

(collection-repeat) wich bir uygulama ng-tekrarı çok daha performantly öğelerin büyük listeleri gösterilmesini sağlar.

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

Hata: Maksimum çağrı yığını boyutu

Sorular aştı Yani

Kod toplama-repeat çözüm

toplama-tekrarı ama bu işe yaramazsa ile benim çözüm ... yeniden yapmak çalıştı: Çok sayıda veri ile akıllı masaların performansını artırmak için herhangi bir açısal veya iyonik çözüm var mı? Koleksiyonumda tekrarla neyin yanlış?

Answer 1

u kullandığınız İyonik hangi sürümü

? Eğer sürüm 1.0 beta 14 veya daha yüksek kullanım bind once (Açısal 1.3 yerli)

kullanıyorsanız Böyle istiyorum.

<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

nasıl verileri yüklüyorsunuz?

$scope.ColumnTable.push(newData); yapıyorsanız, bunun yapılması uygun bir yol değildir.

Ne yapmam geçerli:

• Geçici Tablo yük bir hizmet oluşturmak: Şunu myService.setTable() diyelim. Bir olay ile kontrolör bilgilendirin

• : Bu hizmet kontrolör & güncelleme tabloya bir olay $rootScope.$broadCast("myService.setTable-refresh")

• yakalamak olay gönderir: HTML ile çalışmak $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

• Güncelleme myWorkingTable

Üstelik performans o için ng-repeat içine benzersiz bir anahtar tanımlamak zorundadır önceden oluşturulmuş içeriği yeniden oluşturmak için track by tarafından kullanılan ptimisation.Burada

bakınız açıklama: Bir kez bağlamak için http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm