El filtro «filtro» en AngularJS se usa para filtrar la array y los elementos del objeto y devolver los elementos filtrados. En otras palabras, este filtro selecciona un subconjunto (una array más pequeña que contiene elementos que cumplen los criterios del filtro) de una array de la array original.
Sintaxis:
{{ arrayexpression | filter : expression : comparator : anyPropertyKey }}
Parámetro:
- arrayexpression: la array de origen en la que se aplicará el filtro.
- expresión: Se utiliza para seleccionar los elementos de la array, después de que se cumplan las condiciones del filtro.
- comparador: se utiliza para determinar el valor comparando el valor esperado de la expresión de filtro y el valor real de la array de objetos.
- anyPropertyKey: es una propiedad especial que se utiliza para hacer coincidir el valor con la propiedad dada. Su valor predeterminado es $.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | filter Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<h1 style="color:green;">GeeksforGeeks</h1>
<ol>
<strong>
<li ng-repeat="x in names | filter : 'e'">
{{ x }}
</li>
</strong>
</ol>
</div>
<script>
angular.module('myApp', []).controller(
'namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege Mathew',
'Joey Tribiani',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>
This example displays the names
containing the character "e"(filter)
</p>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo utiliza un objeto para filtrar su elemento.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | filter Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<bod>
<div ng-app="myApp" ng-controller="arrCtrl">
<h1 style="color:green">GeeksforGeeks</h1>
<ol>
<li ng-repeat=
"x in customers | filter :{'name' : 'e', 'city' : 'Patna'}">
{{x.name + ", " + x.city}}
</li>
</ol>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.customers = [{
"name": "Chocolate Shake",
"city": "Patna"
}, {
"name": "Hot Chocolate",
"city": "Delhi"
}, {
"name": "Milk",
"city": "Patna"
}, {
"name": "Coffee",
"city": "Patna"
}, {
"name": "Tea",
"city": "Pune"
}, {
"name": "Mineral Water",
"city": "Mumbai"
}, {
"name": "Iced Tea",
"city": "Bangalore"
}];
});
</script>
<p>
The filter will give a match if there is
an "e" character in the name, and the city
is "Patna". Milk wasn't matched because
the alphabet 'e' is not present.
</p>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, vamos a ver un caparazón «estricto» que no devuelve ningún valor a menos que sea una coincidencia pura.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | filter Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="arrCtrl">
<h1 style="color:green">GeeksforGeeks</h1>
<ol>
<li ng-repeat="x in customers | filter : 'Chinchwad' : true">
{{x.name + ", " + x.city}}
</li>
</ol>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.customers = [{
"name": "Mumbai Food",
"city": "Chinchwad"
}, {
"name": "Gurgaon Catering",
"city": "Haryana City"
}, {
"name": "Noida temperature",
"city": " Chinchwad"
},
];
});
</script>
<p>The filter will give a match for the array item(s)
where one or more object values are "Chinchwad".</p>
</body>
</html>
Producción:
Nota: si nota que el último Chinchwad en la array no está incluido en la lista, porque el último Chinchwad contiene un espacio antes de sí mismo.
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA