Filtros AngularJS
Los filtros se pueden agregar en AngularJS para dar formato a los datos.
Filtros AngularJS
AngularJS proporciona filtros para transformar datos:
currencyDar formato a un número a un formato de moneda.dateDar formato a una fecha en un formato especificado.filterSeleccione un subconjunto de elementos de una matriz.jsonDa formato a un objeto a una cadena JSON.limitToLimita una matriz/cadena a un número específico de elementos/caracteres.lowercaseDar formato a una cadena en minúsculas.numberDar formato a un número en una cadena.orderByOrdena una matriz por una expresión.uppercaseDar formato a una cadena en mayúsculas.
Adición de filtros a expresiones
Los filtros se pueden agregar a las expresiones usando el carácter de barra vertical |, seguido de un filtro.
Las uppercasecadenas de formato de filtro en mayúsculas:
Ejemplo
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Las lowercasecadenas de formato de filtro en minúsculas:
Ejemplo
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Adición de filtros a directivas
Los filtros se agregan a las directivas, como ng-repeat, usando el carácter de barra vertical
|, seguido de un filtro:
Ejemplo
El orderByfiltro ordena una matriz:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
El filtro de divisas
El currencyfiltro da formato a un número como moneda:
Ejemplo
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Lea más sobre el filtro de divisas en nuestra Referencia de filtro de divisas de AngularJS
El filtro Filtro
El filterfiltro selecciona un subconjunto de una matriz.
El filterfiltro solo se puede usar en matrices y devuelve una matriz que contiene solo los elementos coincidentes.
Ejemplo
Devuelve los nombres que contienen la letra "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Lea más sobre el filtro de filtro en nuestra Referencia de filtro de filtro AngularJS
Filtrar una matriz según la entrada del usuario
Al establecer la ng-modeldirectiva en un campo de entrada, podemos usar el valor del campo de entrada como una expresión en un filtro.
Escriba una letra en el campo de entrada y la lista se reducirá/aumentará según la coincidencia:
- jani
- Carlos
- Margarita
- Hege
- José
- Gustavo
- birgit
- María
- kai
Ejemplo
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Ordenar una matriz según la entrada del usuario
Haga clic en los encabezados de la tabla para cambiar el orden de clasificación:
| Nombre | País |
|---|---|
| jani | Noruega |
| Carlos | Suecia |
| Margarita | Inglaterra |
| Hege | Noruega |
| José | Dinamarca |
| Gustavo | Suecia |
| birgit | Dinamarca |
| María | Inglaterra |
| kai | Noruega |
Al agregar la ng-clickdirectiva en los encabezados de la tabla, podemos ejecutar una función que cambia el orden de clasificación de la matriz:
Ejemplo
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script>
Filtros personalizados
Puede hacer sus propios filtros registrando una nueva función de fábrica de filtros con su módulo:
Ejemplo
Haz un filtro personalizado llamado "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
El myFormatfiltro formateará todos los demás caracteres en mayúsculas.