La tarea es iterar sobre una colección de objetos ya filtrados por filtros ng-repeat y después de hacer clic en un botón, cambiar alguna propiedad solo de aquellos objetos que se filtraron. Suponga que tiene una colección de objetos que fueron filtrados por una búsqueda de texto dentro de una propiedad de título en cada objeto. Ahora desea iterar sobre este subconjunto de la lista, después de hacer clic en un botón asignado y cambiar una propiedad en los elementos que coinciden con este filtro.
Para iterar sobre una colección de objetos ya filtrados por filtros ng-repeat, usamos una expresión de alias. Creamos un alias de la variable utilizada para filtrar los datos de repetición ng. Esa variable de alias se pasa a una función Angular() cuando se hace clic en un botón. Ahora, dentro de esa función AngularJS, como la variable de alias contiene valores de solo aquellos objetos que se filtraron, iteramos sobre cada uno de esos valores. Para cada iteración, cambiamos alguna propiedad como en este caso las calificaciones de los estudiantes filtrados por 10 y luego consolamos los valores.
Sintaxis:
<elemento ng-repeat=”expresión | filter: search as result”> Content… </element>
<script> result.forEach(function(student){ student.marks += 10; }); <script>
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo: En este ejemplo, estamos mostrando los detalles de los estudiantes y hay un cuadro de búsqueda para buscar por nombre del 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 de ella que es el resultado aquí y luego, cuando hacemos clic en el botón de cambio de marcas , se llama a la función changemarks() y la variable de alias del resultado se pasa como argumento. Ahora, dentro de la función changemarks() , aumentamos las calificaciones de cada estudiante filtrado en 10. Entonces, al hacer clic en el botón cambiar marcas, cambiamos la propiedad de las calificaciones solo de aquellos estudiantes que ya estaban filtrados.
<!DOCTYPE html>
<html>
<head>
<title>
Angular JS Iteration Over Filtered Data
</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body style="margin: 10px;">
<h1 style="color:green;">
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><b>length of filtered data:</b> {{ result.length }}</p>
<button type="button" class="btn btn-success"
ng-click="changemarks(result)">change marks</button>
</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: 82
}, {
name: 'Prakhar',
marks: 85
}, {
name: 'Pranjal',
marks: 75
}, {
name: 'Sunny',
marks: 69
}];
$scope.changemarks = function(values) {
angular.forEach(values, function(value, key) {
value.marks += 10;
console.log(value.name + ' ' + value.marks);
});
};
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pratyushranjan14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA