it-swarm.com.de

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

Ich habe ein Datenarray, das viele Objekte enthält (JSON-Format). Folgendes 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:

<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, der Showing...persons auch den Wert der Personen ändert, die aktuell angezeigt werden. Aber es passiert nicht. Es werden immer die gesamten Personen in den Daten angezeigt, nicht die gefilterten. Wie erhalte ich die Anzahl der gefilterten Daten?

425
user109187

Für Angular 1.3 + (Dank an @Tom)

Verwenden Sie einen Alias-Ausdruck (Docs: Angular 1.3.0: ngRepeat , scrollen Sie nach unten zu den Argumenten Sektion):

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

Für Angular vor 1.3

Ordnen 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>

Anzahl der Ergebnisse anzeigen:

Showing {{filtered.length}} Persons

Geige ein ähnliches Beispiel . Credits gehen an Pawel Kozlowski

733
Wumms

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

Angenommen, Ihre Personenliste befindet sich in der Variablen data und Sie filtern Personen mit dem Modell query. 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}} - Gibt die Gesamtzahl der Personen aus
  • {{(data|filter:query).length}} - druckt die gefilterte Anzahl von Personen

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

Neues Feature in Angular 1.3

AngularJS-Entwickler bemerkten auch dieses Problem und fügten in Version 1.3 (beta 17) einen "Alias" -Ausdruck 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 Probleme bei der Ausführung mehrerer Filter.

Ich hoffe das wird helfen.

328
Tom

Der einfachste Weg, wenn Sie haben

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

Gefilterte Datenlänge

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

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

In Ihrem Fall ist es möglicherweise besser, den Filter in Ihrem Controller mit dem Service $filter anzuwenden:

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

  $scope.filteredData = myNormalData;

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

  // ...
}
_

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

34

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>

Von docs :

Sie können auch einen optionalen Alias-Ausdruck angeben, der die Zwischenergebnisse des Repeaters speichert, nachdem die Filter angewendet wurden. In der Regel wird hiermit eine spezielle Nachricht gerendert, wenn auf dem Repeater ein Filter aktiv ist, die gefilterte Ergebnismenge jedoch leer ist.

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

29
WelcomeTo

Beachten Sie auch, dass Sie durch Gruppieren von Filtern mehrere Ergebnisebenen speichern können

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

24
JeremyWeir

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;
  });
});
13
Maksym

Sie können es mit 2 Möglichkeiten tun. In Template 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 gefilterte Anzahl Beispiele/Demos

9