ng-repeat ve limitTo kullanarak görüntülenen görünür öğe sayısını sınırlamak için

Question

Sonuç kümelerimi sabit bir sayıyla sınırlamaya çalışıyorum. limitTo'u ng-repeat ile kullanabilirim, ancak bu, geçerli görünürlüklerinden bağımsız olarak öğeleri sınırlar ve öğeleri DOM'dan kaldırır. DOM'ta her şeyi saklarken görünür birkaç öğeyle sınırlamak istiyorum.

İşte sahip olduğum geçerli kod. Hedefim, her zaman items 500 öğe içeriyor olsa da listede en fazla 50 öğe göstermektir.

<div ng-repeat="item in items | limitTo: 50"> 
    <div ng-show="item.visible"> 
    <p>item.id</p> 
    </div> 
</div> 

Bu başlangıçta 50 öğelere sınırlar, ama (bazı öğeler üzerinde item.visible değiştirerek) listeye filtre varsa, liste asla 50 aralığında öğeleri gösterir - 500 yerine 50'den az görüntüler öğeler. ng-repeat'u sınırlamanın doğru yolu nedir, böylece yalnızca görünen öğeleri sınırlama sınırlamasına doğru mu sayılır?

Answer 1

Sen kullanabilirsiniz:

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50"> 
    <p>{{item.id}}</p> 
</div> 

filter:{visible: true} Sen hakkında daha fazla bilgi için angularjs docu bir göz alabilir

tüm görünür öğelerin listesini döndürür filtre filtresi. http://docs.angularjs.org/api/ng.filter:filter

Answer 2

Birkaç yaklaşım var, belki de en çok yeniden kullanılabilir, öğelerinizde görünür nitelikler arayan kendi 'görünür' özel filtrelerinizi oluşturmak sizin için. O zaman onları zincirleyebilirsin.

<div ng-repeat="item in items | visible | limitTo: 50"> 

Here's a SO link to create custom filters

Answer 3

O bu şekilde yapmak da mümkündür:

<div ng-repeat="item in items" ng-show="$index<50"> 
    <p>item.id</p> 
</div> 

Answer 4

DOM ekranı belirtmek için $ indeksi ile ng-eğer kullanabilirsiniz. Yine de yorumlar üretir, ancak nesneyi yüklemez, bu yüzden çok gelişmiş performans fark edilir.

<div ng-init="your.objects={{},{},{}}; your.max=10"> 
    <div ng-repeat="object in your.objects" ng-if="$index<your.max"> 
    {{object}} 
    </div> 
</div>