Verwenden von ng-repeat und limitTo, um die Anzahl der angezeigten sichtbaren Elemente zu begrenzen

Ich versuche, meine Ergebnismengen auf eine feste Anzahl zu beschränken. Ich kann limitTo mit ng-repeat verwenden, aber dies beschränkt Elemente unabhängig von ihrer aktuellen Sichtbarkeit und entfernt Elemente aus dem DOM. Ich möchte auf eine Anzahl sichtbarer Elemente beschränken und gleichzeitig alles im DOM behalten.Verwenden von ng-repeat und limitTo, um die Anzahl der angezeigten sichtbaren Elemente zu begrenzen

Hier ist der aktuelle Code, den ich habe. Mein Ziel ist es immer nicht mehr als 50 Artikel in der Liste zu zeigen, obwohl items 500 Artikel enthält.

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

Dies wird zu 50 Elemente zunächst begrenzen, aber wenn ich die Liste filtern (nach item.visible auf einigen Positionen zu verändern), zeigt die Liste nie Elemente im Bereich von 50 bis 500 und zeigt stattdessen weniger als 50 Artikel. Was ist der richtige Weg, um ein ng-repeat zu begrenzen, so dass es nur sichtbare Elemente in Richtung der Limit-Beschränkung zählt?

Quelle

2013-10-25 Bill

können Sie verwenden:

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

filter:{visible: true} wird eine Liste aller sichtbaren Elemente zurückkehren

Sie einen Blick auf die AngularJS Doku auf die für weitere Informationen nehmen Filterfilter. http://docs.angularjs.org/api/ng.filter:filter

Quelle

2013-10-26 00:00:01 bekite

Das ist nicht dasselbe, da Filter Elemente aus dem DOM entfernen (wie ng-if), anstatt nur die Sichtbarkeit zu ändern (wie ng-show). Ich suche nach einer Lösung, die mit ng-show funktioniert. – Bill

Aus welchem Grund möchten Sie versteckte Elemente im DOM behalten? – bekite

Ständig hinzufügen und entfernen ist langsam. Bei ng-show erfolgt die Filterung sofort, mit ng - wenn es einen leichten Schluckauf gibt, bevor die aktualisierten Ergebnisse angezeigt werden. – Bill

Es gibt eine Reihe von Ansätzen, vielleicht die am meisten wiederverwendbare ist für Sie Ihren eigenen 'sichtbaren' benutzerdefinierten Filter zu erstellen, der nach sichtbaren Attribut auf Ihren Artikeln sucht. Dann könnten Sie sie verketten.

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

Here's a SO link to create custom filters

Quelle

2013-10-25 23:48:51

Gibt es eine Lösung, die keine Elemente aus dem DOM entfernt? Ich suche nach etwas, das mit ng-show funktioniert. – Bill

Es ist auch möglich, es so zu tun:

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

Quelle

2015-03-27 19:59:35 Kostyantyn

Diese Methode setzt den HTML-Code physisch ein. Wenn Sie 2000 Datensätze haben, werden 2000 Divs in Ihren HTML-Code eingefügt, aber nicht angezeigt. 'ng-if' ist etwas besser, da es Kommentare anstelle von html ablegt, aber es wäre immer noch besser, nur limitTo zu verwenden, damit kein zusätzlicher Inhalt in das Dokument gedruckt wird –

Sie ng-wenn mit $ Index verwenden können DOM Anzeige angeben. Noch generiert ng-wenn Kommentare aber nicht das Objekt so viel verbesserte Leistung bemerkt.

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

Quelle

2015-06-19 08:01:41 irth

Verwenden von ng-repeat und limitTo, um die Anzahl der angezeigten sichtbaren Elemente zu begrenzen

Antwort

Verwandte Themen