tutoriais mais recente desenvolvimento web
 

AngularJS filtros

❮ Anterior Próxima Capítulo ❯

Os filtros podem ser adicionados em AngularJS para formatar dados.

AngularJS Filtros

AngularJS fornece filtros para transformar dados:

  • currency formatar um número para um formato de moeda.
  • date formatar uma data para um formato especificado.
  • filter selecionar um subconjunto de itens de uma matriz.
  • json formatar um objeto para uma string JSON.
  • limitTo Limita um array / string, em um número especificado de elementos / caracteres.
  • lowercase Format uma string para minúsculas.
  • number formatar um número para uma string.
  • orderBy Ordena um array por uma expressão.
  • uppercase Format uma string para maiúsculas.

Adição de filtros para Expressões

Os filtros podem ser adicionados às expressões usando o caractere pipe | , seguido de um filtro.

As uppercase cordas do formato de filtro para maiúsculas:

Exemplo

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
Tente você mesmo "

As lowercase cordas do formato de filtro para letras minúsculas:

Exemplo

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
Tente você mesmo "

Adição de filtros com as Directivas

Os filtros são adicionados a directivas, como ng-repeat , usando o caractere pipe | , seguido por um filtro:

Exemplo

O orderBy filtro classifica um array:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
Tente você mesmo "

O Filtro de moeda

A currency filtro formata um número como moeda:

Exemplo

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
Tente você mesmo "

Leia mais sobre o filtro de moeda na nossa moeda AngularJS filtros de referência

O filtro Filtro

O filter do filtro selecciona um subconjunto de uma matriz.

O filter do filtro só pode ser usado em matrizes, e retorna uma matriz contendo apenas os itens correspondentes.

Exemplo

Retornar 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>
Tente você mesmo "

Leia mais sobre o filtro do filtro em nosso filtro AngularJS filtros de referência

Filtrar uma matriz com base na entrada do usuário

Ao definir o ng-model directiva sobre 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, ea lista vai encolher / crescer dependendo do jogo:

  • {{X}}

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>
Tente você mesmo "

Organizar 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
{{}} X.name {{}} X.country

Ao adicionar o ng-click directiva sobre os cabeçalhos da tabela, podemos executar uma função que muda a ordem de classificação da matriz:

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>
Tente você mesmo "

Filtros personalizados

Você pode fazer seus próprios filtros, registrando uma nova função de filtro de fábrica com o seu módulo:

Exemplo

Fazer 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>
Tente você mesmo "

O myFormat filtro irá formatar todos os outros caracteres para maiúsculas.


❮ Anterior Próxima Capítulo ❯