Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-08 14:45:02
Original
798 Leute haben es durchsucht

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

Anzeige der Länge gefilterter Daten in ng-repeat

In Angular-Anwendungen werden Daten häufig mithilfe der ng-repeat-Direktive angezeigt, die iteriert über ein Array oder eine Sammlung. Beim Filtern der Daten basierend auf Benutzereingaben ist es jedoch erforderlich, die angezeigte Anzahl der Elemente zu aktualisieren.

Bei Verwendung von ng-repeat mit einem Filter stellt die Eigenschaft data.length weiterhin den gesamten Datensatz dar. unabhängig von eventuell angewendeten Filtern. Um die Anzahl der gefilterten Elemente zu erhalten, sind alternative Ansätze erforderlich.

Für Angular 1.3

Angular 1.3 führte Alias-Ausdrücke ein, die es ermöglichen, dem gefilterten Datensatz einen Alias ​​zuzuweisen. Durch die Verwendung dieses Alias ​​können Sie wie unten gezeigt auf die Länge der gefilterten Daten zugreifen:

<div ng-repeat="person in data | filter:query as filtered">
</div>
<div>Showing {{filtered.length}} Persons</div>
Nach dem Login kopieren

Für Angular vor 1.3

In früheren Versionen von Angular eine Problemumgehung besteht darin, die gefilterten Daten einer neuen Variablen zuzuweisen und diese Variable dann zur Anzeige zu verwenden:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>
<div>Showing {{filtered.length}} Persons</div>
Nach dem Login kopieren

Durch die Implementierung dieser Techniken können Sie die Anzahl der gefilterten Elemente in Ihrer Angular-Anwendung dynamisch anzeigen und so sicherstellen, dass der Benutzer wird mit genauen Informationen über die sichtbaren Daten versorgt.

Das obige ist der detaillierte Inhalt vonWie zeige ich die Anzahl der gefilterten Daten in ng-repeat in Angular 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage