Wie kann die Länge der gefilterten ng-repeat-Daten angezeigt werden?

Question

Ich habe ein Datenarray, das viele Objekte (im JSON-Format) enthält. Das Folgende kann als Inhalt dieses Arrays angenommen werden:

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

Jetzt zeige ich diese Details wie folgt an:

``

Hier wird die Abfrage an ein Eingabefeld modelliert, mit dem der Benutzer die angezeigten Daten einschränken kann.

Jetzt habe ich einen anderen Ort, an dem ich die aktuelle Anzahl der angezeigten Personen anzeigen, also Zeige {{data.length}} Personen

Was ich tun möchte, ist, dass wenn der Benutzer nach einer Person sucht und die angezeigten Daten basierend auf der Abfrage gefiltert werden, die Anzeigen... Personen auch den Wert der aktuell angezeigten Personen ändern. Aber das passiert nicht. Es zeigt immer die Gesamtanzahl der Personen in den Daten an, anstatt die gefilterten anzuzeigen - wie erhalte ich die Anzahl der gefilterten Daten?

``

Answer 1

Für Angular 1.3+ (Credits to @Tom)

Verwenden Sie einen Alias-Ausdruck (Dokumente: Angular 1.3.0: ngRepeat, scrollen Sie zum Abschnitt Argumente):

Für Angular vor 1.3

Weisen Sie die Ergebnisse einer neuen Variablen zu (z.B. filtered) und greifen Sie darauf zu:

Zeigen Sie die Anzahl der Ergebnisse an:

Zeige {{filtered.length}} Personen

Probieren Sie ein ähnliches Beispiel aus. Credits gehen an Pawel Kozlowski

Answer 2

Zur Vollständigkeit, zusätzlich zu den vorherigen Antworten (Berechnung der sichtbaren Personen im Controller durchführen), können Sie auch diese Berechnungen in Ihrer HTML-Vorlage wie im folgenden Beispiel durchführen.

Angenommen, Ihre Liste von Personen befindet sich in der Variablen data und Sie filtern Personen mit dem Modell query, wird der folgende Code für Sie funktionieren:

Anzahl der sichtbaren Personen: {{(data|filter:query).length}}
Gesamtzahl der Personen: {{data.length}}

• {{data.length}} - gibt die Gesamtzahl der Personen aus
• {{(data|filter:query).length}} - gibt die gefilterte Anzahl der Personen aus

Beachten Sie, dass diese Lösung gut funktioniert, wenn Sie die gefilterten Daten nur einmal auf einer Seite verwenden möchten. Wenn Sie die gefilterten Daten jedoch mehrmals verwenden, z. B. um Elemente darzustellen und die Länge der gefilterten Liste anzuzeigen, empfehle ich die Verwendung des Alias-Ausdrucks (wie unten beschrieben) für AngularJS 1.3+ oder die von @Wumms vorgeschlagene Lösung für AngularJS-Versionen vor 1.3.

Neues Feature in Angular 1.3

Die Ersteller von AngularJS haben dieses Problem auch bemerkt und in der Version 1.3 (Beta 17) haben sie den "Alias"-Ausdruck hinzugefügt, der die Zwischenergebnisse des Repeaters nach Anwendung der Filter speichert, z. B.

Anzahl der sichtbaren Personen: {{results.length}}

Der Alias-Ausdruck verhindert das Problem der mehrfachen Filterausführung.

Ich hoffe, das wird helfen.

Answer 3

Der einfachste Weg, wenn Sie haben

Gefilterte Datenlänge

{{ (data | filter: query).length }}

Answer 4

NgRepeat erstellt eine Kopie des Arrays, wenn es einen Filter anwendet, daher können Sie das Quellarray nicht verwenden, um nur auf die gefilterten Elemente zu verweisen.

In Ihrem Fall ist es möglicherweise besser, den Filter innerhalb Ihres Controllers mit dem $filter Service anzuwenden:

function MainCtrl($scope, filterFilter) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch('myInputModel', function(val) {
    $scope.filteredData = filterFilter(myNormalData, val);
  });

  // ...
}

Und dann verwenden Sie die filteredData Eigenschaft in Ihrer Ansicht. Hier ist ein funktionierender Plunker: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Answer 5

Seit AngularJS 1.3 können Sie Aliasnamen verwenden:

element in elements | filter:x as results

und irgendwo anders:

Insgesamt {{results.length}} Ergebnisse.

Von Dokumentation:

Sie können auch einen optionalen Aliasausdruck angeben, der dann die Zwischenergebnisse des Repeaters nach Anwendung der Filter speichert. Typischerweise wird dies verwendet, um eine spezielle Nachricht zu rendern, wenn ein Filter auf dem Repeater aktiv ist, aber der gefilterte Ergebnissatz leer ist.

Zum Beispiel: element in elements | filter:x as results speichert das Fragment der wiederholten Elemente als Ergebnisse, aber nur nachdem die Elemente durch den Filter verarbeitet wurden.