Filtros AngularJS
Los filtros se pueden agregar en AngularJS para dar formato a los datos.
Filtros AngularJS
AngularJS proporciona filtros para transformar datos:
currency
Dar formato a un número a un formato de moneda.date
Dar formato a una fecha en un formato especificado.filter
Seleccione un subconjunto de elementos de una matriz.json
Da formato a un objeto a una cadena JSON.limitTo
Limita una matriz/cadena a un número específico de elementos/caracteres.lowercase
Dar formato a una cadena en minúsculas.number
Dar formato a un número en una cadena.orderBy
Ordena una matriz por una expresión.uppercase
Dar 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 uppercase
cadenas de formato de filtro en mayúsculas:
Ejemplo
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Las lowercase
cadenas 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 orderBy
filtro 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 currency
filtro 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 filter
filtro selecciona un subconjunto de una matriz.
El filter
filtro 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-model
directiva 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-click
directiva 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 myFormat
filtro formateará todos los demás caracteres en mayúsculas.