Latest web development tutorials

Filtro AngularJS

Os filtros podem usar um caractere pipe (|) para adicionar as expressões e instruções.

Filtro AngularJS

AngularJS filtro pode ser utilizado para converter os dados:

filtro descrição
moeda Formatar números formatado como moeda.
filtro A seleção de um subconjunto de itens da matriz.
minúsculas cadeia de formato para minúsculas.
orderBy arranjo de matriz de acordo com uma expressão.
maiúscula cadeia de formato para maiúsculas.

Adicionar Expressões de filtro

Filtrar através de uma barra vertical (|), e um filtro é adicionado à expressão. .

((Dois exemplos abaixo, vamos usar a seção anterior mencionou controladores pessoa))

cadeia de filtro maiúsculas formatado como maiúsculas:

AngularJS exemplos

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

<P> nome é {{lastName | maiúscula}} < / p>

</ Div>

tente »

filtro de minúsculas para formatação de strings em minúsculas:

AngularJS exemplos

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

<P> nome é {{lastName | minúsculas}} < / p>

</ Div>

tente »

filtro de moeda

filtro digital moeda será formatado como formato de moeda:

AngularJS exemplos

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

<Input type = "número" ng -model = "quantidade">
<Input type = "número" ng -model = "preço">

<P> preço total = {{(quantidade * preço) | moeda}} </ p>

</ Div>

tente »

Adicionar filtros para a instrução

Filtrar através de um caractere de pipe (|), e um filtro é adicionado à directiva.

orderBy arranjo arranjo de filtro de acordo com a expressão:

AngularJS exemplos

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

<Ul>
<Li ng-repeat = "x em nomes | orderBy: 'país'">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

<Div>

tente »

entrada do filtro

filtro de entrada através de uma barra vertical (|), e um filtro é adicionado à directiva, o filtro seguido por dois pontos e um nome do modelo.

filtro filtros selecionar um subconjunto da matriz:

AngularJS exemplos

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

<P> <input type = " text" ng-model = "test"> </ p>

<Ul>
<Li ng-repeat = "x em nomes | filtro: teste | orderBy: 'país'">
{{(X.name | maiúscula) + ',' + x.country}}
</ Li>
</ Ul>

</ Div>

tente »