SORU
27 HAZİRAN 2013, PERŞEMBE


Ne kadar büyük bir veri kümesi (angular.js üzerinde ngRepeat performansını artırmak için?

Yaklaşık 10 alanlara her veri 2MBs ile ilgili binlerce satır büyük bir veri kümesi var. Tarayıcıda görüntülemek istiyorum. En basit yaklaşım (fetch veri, içine $scope, hadi ng-repeat="" işini) gayet iyi çalışıyor ama donuyor tarayıcı için yaklaşık yarım bir dakika ne zaman başlıyor ekleme düğümleri içine DOM. Bu soruna nasıl bir yaklaşım gerekir?

Bir seçenek $scope satır ekleme ve kademeli ngRepeat bir sonrakine geçmeden önce DOM içine bir parça ekleme bitmesini bekleyin. Ama AFAIK ngRepeat bittiğinde geri bildirmez "çirkin olacak.", tekrar

Diğer seçenek sayfaları sunucu üzerinde veri bölme ve birden fazla isteği onları almak için, ama o daha da çirkin.

ng-repeat="data in dataset" ng-repeat-steps="500" gibi bir şey arayışı içinde Açısal belgelerine baktım ama hiçbir şey bulunamadı. Yollar Açısal için oldukça yeni ve ben tamamen noktasını kaçırıyorum mümkündür. Bu en iyi uygulamaları nelerdir?

CEVAP
27 HAZİRAN 2013, PERŞEMBE


En iyi yaklaşım satır sadece sınırlı bir miktarda, daha hızlı ve daha iyi UX görüntülemek için, bu sonsuz bir kaydırma ile bir sayfa veya yapılabilecek @AndreM96 katılıyorum.

Açısal ile sonsuz kaydırma limitTo filtre ile gerçekten çok basittir. Sadece ilk sınırı ayarlamak için kullanıcıya çok fazla veri (sadelik için bir düğme kullanıyorum) istediğinde sınırı artırmak.

<table>
    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr>
</table>
<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed  = 20;  
};

$scope.data = data;

Burada JsBin.

Bu yaklaşım genellikle çok fazla veri kaydırma zaman lag yüzünden telefonlar için bir sorun olabilir, bu durumda bir sayfa daha uygun bence.

Bunu yapmak için limitTo filtre ve veri görüntülenen başlangıç noktası tanımlamak için özel bir filtre de gerekir.

Burada bir sayfa ile JSBin.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Le Cargo !

    Le Cargo !

    24 HAZİRAN 2007
  • ::..ηєѕѕ мιχ..::

    ::..ηєѕѕ

    15 Aralık 2006
  • TecnoTutosPC

    TecnoTutosPC

    19 Kasım 2012