La tarea es mostrar la longitud de los datos de repetición ng filtrados. Aquí vamos a utilizar la expresión de alias para resolver este problema.
Enfoque: para mostrar la longitud de los datos de repetición ng filtrados, usamos una expresión de alias. Creamos un alias para la variable utilizada para filtrar los datos de repetición ng y mostrar la longitud del alias en cada momento.
Sintaxis:
<element ng-repeat="expression | filter: search as result"> Content... </element>
<p> {{ result.length }} <p>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Angular JS Filtered data length
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body >
<h1 style = "color:green; text-align:center;" >
GeeksForGeeks
</h1>
<div ng-app = "mainApp" ng-controller = "studentController">
<input type = "text" ng-model = "searchName">
<br/>
<ul>
<li ng-repeat =
"student in students | filter: searchName as result">
{{ student.name + ', marks:' + student.marks }}
</li>
</ul>
<p>length of filtered data:- {{ result.length }}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.students = [
{name:'Aman', marks:70},
{name:'Aditya', marks:80},
{name:'Pratyush', marks:92},
{name:'Prakhar', marks:95},
{name:'Pranjal', marks:75},
{name:'Sunny', marks:69}
];
});
</script>
</body>
</html>
Explicación:
Aquí, estamos mostrando los detalles de los estudiantes y hay un cuadro de búsqueda para buscar por nombre de estudiante. Ahora, vinculamos la entrada de ese cuadro de búsqueda en la variable searchName de AngularJS. La variable SearchName se usa para filtrar, creamos un alias que es el resultado aquí y luego mostramos la longitud del resultado. Entonces, a medida que cambia la longitud de los datos de repetición ng filtrados, la longitud del resultado también cambia.
Salida:
la pantalla inicial sería: 
Luego, después de la búsqueda, el cambio de longitud de datos filtrados ng-repeat:
Publicación traducida automáticamente
Artículo escrito por pratyushranjan14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA