Filtros AngularJS
Filtros podem ser adicionados no AngularJS para formatar dados.
Filtros AngularJS
AngularJS fornece filtros para transformar dados:
currency
Formate um número para um formato de moeda.date
Formate uma data para um formato especificado.filter
Selecione um subconjunto de itens de uma matriz.json
Formate um objeto para uma string JSON.limitTo
Limita um array/string em um número especificado de elementos/caracteres.lowercase
Formate uma string para letras minúsculas.number
Formate um número para uma string.orderBy
Ordena uma matriz por uma expressão.uppercase
Formate uma string para maiúsculas.
Adicionando Filtros a Expressões
Os filtros podem ser adicionados às expressões usando o caractere de barra vertical |
, seguido por um filtro.
As uppercase
strings de formato do filtro para maiúsculas:
Exemplo
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
As lowercase
strings de formato do filtro para letras minúsculas:
Exemplo
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Adicionando Filtros a Diretivas
Os filtros são adicionados às diretivas, como ng-repeat
, usando o caractere pipe
|
, seguido por um filtro:
Exemplo
O orderBy
filtro classifica uma matriz:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
O filtro de moeda
O currency
filtro formata um número como moeda:
Exemplo
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Leia mais sobre o filtro de moeda em nossa referência de filtro de moeda AngularJS
O filtro Filtro
O filter
filtro seleciona um subconjunto de uma matriz.
O filter
filtro só pode ser usado em arrays e retorna um array contendo apenas os itens correspondentes.
Exemplo
Retorne os nomes que contém a letra "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Leia mais sobre o filtro de filtro em nossa Referência de filtro de filtro AngularJS
Filtrar uma matriz com base na entrada do usuário
Ao definir a ng-model
diretiva em um campo de entrada, podemos usar o valor do campo de entrada como uma expressão em um filtro.
Digite uma letra no campo de entrada e a lista diminuirá/aumentará dependendo da correspondência:
- Jani
- Carlos
- Margareth
- Hege
- João
- Gustavo
- Birgit
- Mary
- Kai
Exemplo
<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>
Classificar uma matriz com base na entrada do usuário
Clique nos cabeçalhos da tabela para alterar a ordem de classificação::
Nome | País |
---|---|
Jani | Noruega |
Carlos | Suécia |
Margareth | Inglaterra |
Hege | Noruega |
João | Dinamarca |
Gustavo | Suécia |
Birgit | Dinamarca |
Mary | Inglaterra |
Kai | Noruega |
Ao adicionar a ng-click
diretiva nos cabeçalhos da tabela, podemos executar uma função que altera a ordem de classificação do array:
Exemplo
<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
Você pode fazer seus próprios filtros registrando uma nova função de fábrica de filtros com seu módulo:
Exemplo
Faça um filtro personalizado chamado "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>
O myFormat
filtro irá formatar todos os outros caracteres para maiúsculas.