So zeigen Sie die Länge der gefilterten ng-repeat-Daten an

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

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

Jetzt zeige ich diese Details wie folgt an:

<div ng-repeat="person in data | filter: query">
</div

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

Jetzt habe ich einen anderen Ort, an dem ich die aktuelle Anzahl der angezeigten Personen / Personen anzeige, d. H. Showing {{data.length}} Persons

Was ich tun möchte, ist, dass, wenn der Benutzer nach einer Person sucht und die angezeigten Daten basierend auf der Abfrage gefiltert werden, sich Showing...personsauch der Wert der aktuell angezeigten Personen ändert. Aber es passiert nicht. Es werden immer die Gesamtzahl der Personen in den Daten angezeigt und nicht die gefilterten. Wie erhalte ich die Anzahl der gefilterten Daten?

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

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

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

Für Angular vor 1.3

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

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

Zeigen Sie die Anzahl der Ergebnisse an:

Showing {{filtered.length}} Persons

Geige ein ähnliches Beispiel . Credits gehen an Pawel Kozlowski

Der Vollständigkeit halber können Sie zusätzlich zu früheren Antworten (Berechnung der sichtbaren Personen innerhalb des Controllers durchführen) diese Berechnungen auch in Ihrer HTML-Vorlage durchführen, wie im folgenden Beispiel.

Angenommen, Ihre Personenliste ist datavariabel und Sie filtern Personen anhand des queryModells. Der folgende Code funktioniert für Sie:

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

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

Beachten Sie, dass diese Lösung einwandfrei funktioniert, wenn Sie gefilterte Daten nur einmal auf einer Seite verwenden möchten . Wenn Sie jedoch gefilterte Daten mehrmals verwenden, z. B. um Elemente anzuzeigen und die Länge der gefilterten Liste anzuzeigen , würde ich empfehlen, den Alias-Ausdruck (unten beschrieben) für AngularJS 1.3+ oder die von @Wumms für AngularJS vor 1.3 vorgeschlagene Lösung zu verwenden.

Neues Feature in Angular 1.3

AngularJS-Ersteller bemerkten auch dieses Problem und fügten in Version 1.3 (Beta 17) den Ausdruck "Alias" hinzu, der die Zwischenergebnisse des Repeaters speichert, nachdem die Filter angewendet wurden, z

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

Der Alias-Ausdruck verhindert das Problem der Ausführung mehrerer Filter.

Ich hoffe das wird helfen.

Der einfachste Weg, wenn Sie haben

<div ng-repeat="person in data | filter: query"></div>

Gefilterte Datenlänge

<div>{{ (data | filter: query).length }}</div>

ngRepeat erstellt eine Kopie des Arrays, wenn ein Filter angewendet wird. Sie können das Quellarray also nicht verwenden, um nur auf die gefilterten Elemente zu verweisen.

In Ihrem Fall ist es möglicherweise besser, den Filter mithilfe des $filterDienstes in Ihrem Controller anzuwenden :

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

  $scope.filteredData = myNormalData;

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

  // ...
}

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

Seit AngularJS 1.3 können Sie Aliase verwenden:

item in items | filter:x as results

und irgendwo:

<span>Total {{results.length}} result(s).</span>

Aus Dokumenten :

Sie können auch einen optionalen Alias-Ausdruck bereitstellen, in dem die Zwischenergebnisse des Repeaters gespeichert werden, nachdem die Filter angewendet wurden. In der Regel wird dies verwendet, um eine spezielle Nachricht zu rendern, wenn ein Filter auf dem Repeater aktiv ist, die gefilterte Ergebnismenge jedoch leer ist.

Zum Beispiel: Artikel in Artikeln | filter: x as results speichert das Fragment der wiederholten Elemente als Ergebnisse, jedoch erst, nachdem die Elemente durch den Filter verarbeitet wurden.

Es ist auch nützlich zu beachten, dass Sie mehrere Gruppenebenen speichern können, indem Sie Filter gruppieren

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

Hier ist eine Demo-Geige

Hier ist Beispiel gearbeitet Siehe auf Plunker

  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
    <br>
    Showing {{data.length}} Persons; <br>
    Filtered {{counted}}
    <ul>
      <li ng-repeat="person in data | filter:search">
        {{person.name}}
      </li>
    </ul>
  </body>

<script> 
var app = angular.module('angularjs-starter', [])

app.controller('MainCtrl', function($scope, $filter) {
  $scope.data = [
    {
      "name": "Jim", "age" : 21
    }, {
      "name": "Jerry", "age": 26
    }, {
      "name": "Alex",  "age" : 25
    }, {
      "name": "Max", "age": 22
    }
  ];

  $scope.counted = $scope.data.length; 
  $scope.$watch("search", function(query){
    $scope.counted = $filter("filter")($scope.data, query).length;
  });
});

Sie können es auf zwei Arten tun . In Vorlage und in Controller . In der Vorlage können Sie Ihr gefiltertes Array auf eine andere Variable setzen und dann wie gewünscht verwenden. So geht's:

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

Wenn Sie Beispiele benötigen, lesen Sie die AngularJs-Beispiele / Demos für die gefilterte Anzahl