Come visualizzare la lunghezza dei dati filtrati ng-repeat

Ho un array di dati che contiene molti oggetti (formato JSON). Quanto segue può essere assunto come contenuto di questo array:

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

Ora, visualizzo questi dettagli come:

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

Qui, la query è modellata su un campo di input in cui l'utente può limitare i dati visualizzati.

Ora, ho un'altra posizione in cui visualizzo il conteggio attuale delle persone / persone visualizzate, ad es Showing {{data.length}} Persons

Quello che voglio fare è che quando l'utente cerca una persona e i dati visualizzati vengono filtrati in base alla query, Showing...personscambia anche il valore delle persone mostrate al momento. Ma non sta succedendo. Visualizza sempre il totale delle persone nei dati anziché quello filtrato: come posso ottenere il conteggio dei dati filtrati?

Per Angular 1.3+ (crediti a @Tom)

Usa un'espressione alias (Documenti: Angolare 1.3.0: ngRipeti , scorri verso il basso fino alla sezione Argomenti ):

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

Per angolare prima di 1.3

Assegnare i risultati a una nuova variabile (ad es. filtered) E accedervi:

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

Visualizza il numero di risultati:

Showing {{filtered.length}} Persons

Fiddle un esempio simile . I crediti vanno a Pawel Kozlowski

Per completezza, oltre alle risposte precedenti (eseguire il calcolo delle persone visibili all'interno del controller) è anche possibile eseguire tali calcoli nel modello HTML come nell'esempio seguente.

Supponendo che il tuo elenco di persone sia datavariabile e che filtri le persone utilizzando il querymodello, il seguente codice funzionerà per te:

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

• {{data.length}} - stampa il numero totale di persone
• {{(data|filter:query).length}} - stampa il numero filtrato di persone

Si noti che questa soluzione funziona correttamente se si desidera utilizzare i dati filtrati una sola volta in una pagina. Tuttavia, se si utilizzano i dati filtrati più di una volta, ad es. Per presentare elementi e mostrare la lunghezza dell'elenco filtrato, suggerirei di utilizzare l' espressione alias (descritta di seguito) per AngularJS 1.3+ o la soluzione proposta da @Wumms per AngularJS versione precedente alla 1.3.

Nuova funzione in angolare 1.3

I creatori di AngularJS hanno anche notato quel problema e nella versione 1.3 (beta 17) hanno aggiunto l'espressione "alias" che memorizzerà i risultati intermedi del ripetitore dopo l'applicazione dei filtri, ad es.

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

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

L' espressione alias impedirà il problema dell'esecuzione di più filtri.

Spero che possa essere d'aiuto.

Il modo più semplice se lo hai

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

Lunghezza dei dati filtrati

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

ngRepeat crea una copia dell'array quando applica un filtro, quindi non è possibile utilizzare l'array di origine per fare riferimento solo agli elementi filtrati.

Nel tuo caso, in potrebbe essere meglio applicare il filtro all'interno del controller utilizzando il $filterservizio:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

E poi usi invece la filteredDataproprietà nella tua vista. Ecco un Plunker funzionante: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Da AngularJS 1.3 è possibile utilizzare gli alias:

item in items | filter:x as results

e da qualche parte:

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

Da documenti :

È inoltre possibile fornire un'espressione alias facoltativa che memorizzerà quindi i risultati intermedi del ripetitore dopo l'applicazione dei filtri. In genere, viene utilizzato per visualizzare un messaggio speciale quando un filtro è attivo sul ripetitore, ma il set di risultati filtrati è vuoto.

Ad esempio: oggetto in oggetti | filtro: x come risultati memorizzerà il frammento degli elementi ripetuti come risultati, ma solo dopo che gli articoli sono stati elaborati attraverso il filtro.

È anche utile notare che è possibile memorizzare più livelli di risultati raggruppando i filtri

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>

ecco un violino demo

Ecco un esempio funzionante Vedi su 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;
  });
});

Puoi farlo in 2 modi . Nel modello e nel controller . Nel modello è possibile impostare l'array filtrato su un'altra variabile, quindi utilizzarlo come si desidera. Ecco come farlo:

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

Se hai bisogno di esempi, vedi gli esempi / demo di conteggio filtrati di AngularJs