Cómo mostrar la longitud de los datos de repetición ng filtrados
Tengo una matriz de datos que contiene muchos objetos (formato JSON). Se puede asumir 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 mostrados.
Ahora, tengo otra ubicación en la que muestro el recuento actual de personas/personas que se muestran, es decirShowing {{data.length}} Persons
Lo que quiero hacer es que cuando el usuario busque una persona y los datos mostrados se filtren según la consulta, Showing...personstambién cambie el valor de las personas que se muestran actualmente. Pero eso no está sucediendo. Siempre muestra el total de personas en los datos en lugar de los filtrados. ¿Cómo obtengo el recuento de los datos filtrados?
Para Angular 1.3+ (créditos a @Tom)
Utilice una expresión de alias (Documentos: 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 (p. ej. 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 siguiente ejemplo.
Suponiendo que su lista de personas esté en datavariable y filtre personas usando queryel modelo, 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 una 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á problemas de ejecución de múltiples filtros.
Espero que le ayudará.
