Cómo mostrar la longitud de los datos filtrados ng-repeat

Tengo una matriz de datos que contiene muchos objetos (formato JSON). Se puede suponer lo siguiente como contenido de esta matriz:

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

Ahora, muestro estos detalles como:

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

Aquí, la consulta se modela en un campo de entrada en el que el usuario puede restringir los datos que se muestran.

Ahora, tengo otra ubicación en la que visualizo el recuento actual de personas / personas que se muestran, es decir Showing {{data.length}} Persons

Lo que quiero hacer es que cuando el usuario busca a una persona y los datos que se muestran se filtran en función de la consulta, Showing...personstambién cambia el valor de las personas que se muestran actualmente. Pero no está sucediendo. Siempre muestra el total de personas en los datos en lugar del filtrado: ¿cómo obtengo el recuento de datos filtrados?

Para Angular 1.3+ (créditos a @Tom)

Use una expresión de alias (Docs: Angular 1.3.0: ngRepeat , desplácese hacia abajo hasta la sección Argumentos ):

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

Para angular anterior a 1.3

Asigne los resultados a una nueva variable (por ejemplo filtered) y acceda a ella:

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

Mostrar el número de resultados:

Showing {{filtered.length}} Persons

Violín un ejemplo similar . Los créditos van a Pawel Kozlowski

Para completar, además de las respuestas anteriores (realizar el cálculo de personas visibles dentro del controlador) también puede realizar esos cálculos en su plantilla HTML como en el ejemplo a continuación.

Suponiendo que su lista de personas está en datavariable y que filtra personas usando el querymodelo, el siguiente código funcionará para usted:

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

• {{data.length}} - imprime el número total de personas
• {{(data|filter:query).length}} - imprime el número filtrado de personas

Tenga en cuenta que esta solución funciona bien si desea utilizar datos filtrados solo una vez en una página. Sin embargo, si usa datos filtrados más de una vez, por ejemplo, para presentar elementos y mostrar la longitud de la lista filtrada, sugeriría usar una expresión de alias (descrita a continuación) para AngularJS 1.3+ o la solución propuesta por @Wumms para la versión de AngularJS anterior a 1.3.

Nueva característica en Angular 1.3

Los creadores de AngularJS también notaron ese problema y en la versión 1.3 (beta 17) agregaron la expresión "alias" que almacenará los resultados intermedios del repetidor después de que se hayan aplicado los filtros, por ejemplo

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

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

La expresión de alias evitará un problema de ejecución de múltiples filtros.

Espero que le ayudará.

La forma más fácil si tienes

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

Longitud de datos filtrados

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

ngRepeat crea una copia de la matriz cuando aplica un filtro, por lo que no puede usar la matriz fuente para hacer referencia solo a los elementos filtrados.

En su caso, puede ser mejor aplicar el filtro dentro de su controlador utilizando el $filterservicio:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

Y luego usa la filteredDatapropiedad en su vista en su lugar. Aquí hay un Plunker en funcionamiento: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Desde AngularJS 1.3 puede usar alias:

item in items | filter:x as results

y en alguna parte:

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

De documentos :

También puede proporcionar una expresión de alias opcional que luego almacenará los resultados intermedios del repetidor después de que se hayan aplicado los filtros. Por lo general, esto se usa para representar un mensaje especial cuando un filtro está activo en el repetidor, pero el conjunto de resultados filtrado está vacío.

Por ejemplo: artículo en artículos | filter: x como resultados almacenará el fragmento de los elementos repetidos como resultados, pero solo después de que los elementos hayan sido procesados ​​a través del filtro.

También es útil tener en cuenta que puede almacenar múltiples niveles de resultados agrupando filtros

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>

aquí hay un violín de demostración

Aquí está el ejemplo trabajado Ver en 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;
  });
});

Puedes hacerlo de 2 maneras . En plantilla y en controlador . En la plantilla, puede establecer su matriz filtrada en otra variable y luego usarla como desee. Aquí está cómo hacerlo:

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

Si necesita ejemplos, vea los ejemplos / demostraciones de conteo filtrado de AngularJs