Heim > Web-Frontend > js-Tutorial > Wie zeige ich die Anzahl gefilterter Daten in Angular ng-repeat an?

Wie zeige ich die Anzahl gefilterter Daten in Angular ng-repeat an?

DDD
Freigeben: 2024-11-11 05:54:03
Original
571 Leute haben es durchsucht

How to Display Filtered Data Count in Angular ng-repeat?

Anzeigen der Anzahl gefilterter Daten in Angular ng-repeat

Die Verwendung von ng-repeat zum Anzeigen gefilterter Daten in Angular kann schwierig sein Zeigen Sie die Anzahl der gefilterten Elemente genau an. Zunächst verfügen Sie über ein Datenarray mit mehreren Objekten und filtern die Daten basierend auf einer Benutzereingabeabfrage. Die Anzahl der angezeigten Personen bleibt jedoch unabhängig vom Filter gleich.

Um dieses Problem zu beheben und die Anzahl der gefilterten Daten anzuzeigen, bietet Angular zwei Ansätze:

Methode 1 (Angular 1.3): Alias-Ausdruck

Für Angular-Versionen 1.3 und höher können Sie einen Alias-Ausdruck verwenden, um eine neue Variable zu erstellen, die auf die gefilterten Daten verweist. Mit diesem Alias-Ausdruck können Sie direkt auf die Länge der gefilterten Elemente zugreifen:

<div ng-repeat="person in data | filter: query as filtered">
</div>
Nach dem Login kopieren

Methode 2 (Angular Pre-1.3): Variablenzuweisung

In früheren Versionen von Angular können Sie die Ergebnisse der gefilterten NG-Wiederholung einer neuen Variablen zuweisen, etwa so:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>
Nach dem Login kopieren

Dann können Sie die Anzahl der gefilterten Elemente anzeigen:

Showing {{filtered.length}} Persons
Nach dem Login kopieren

Mit beiden Methoden können Sie die Anzahl der angezeigten Personen dynamisch aktualisieren, während der Benutzer die Daten filtert, und so eine genauere Darstellung der gefilterten Ergebnisse bereitstellen.

Das obige ist der detaillierte Inhalt vonWie zeige ich die Anzahl gefilterter Daten in Angular ng-repeat an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage