SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
Tutorial
AngularJS
Episódio 06
Filtros
O que é um filtro?

Filtro é um mecanismo que permite
transformar os dados que são exibidos
para o usuário
Filtro - sintaxe

{{ expressão | filtro : parametro1 : ...paramentroN }}
Principais filtros
●
●
●
●
●
●
●
●

currency
date
orderBy
filter
json
lowercase
uppercase
limitTo
Principais filtros - currency

Transforma um número em formato monetário.
Principais filtros - date

Formata uma data (usando máscara ou não).
Principais filtros - orderBy

Ordena um array de acordo com o predicado.
Principais filtros - filter

Filtra dados de um array. Útil quando temos
uma lista muito grande.
Principais filtros - json

Exibe um json da expressão. Usado para
debug.
Principais filtros - lowercase

Passa todas as letras para caixa baixa
(minúsculas).
Principais filtros - uppercase

Passa todas as letras para caixa alta
(maiúsculas).
Principais filtros - limitTo

Limita os elementos de um array.
http://plnkr.co/FCtK26

Contenu connexe

En vedette

O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJSBeto Muniz
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasJanderson Fernandes Cardoso
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJSRodrigo Branas
 
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário Osmar Petry
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJSRodrigo Branas
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJSRodrigo Branas
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSRodrigo Branas
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideSergio Azevedo
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões RegularesRodrigo Branas
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slidessamhelman
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSRodrigo Branas
 
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJSUtilizando diretivas com AngularJS
Utilizando diretivas com AngularJSRodrigo Branas
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsCloves Moreira Junior
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAWilson Mendes
 

En vedette (20)

Curso AngularJS - 7. temas avanzados
Curso AngularJS - 7. temas avanzadosCurso AngularJS - 7. temas avanzados
Curso AngularJS - 7. temas avanzados
 
Introdução ao AngularJS!
Introdução ao AngularJS!Introdução ao AngularJS!
Introdução ao AngularJS!
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJSUtilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Angularjs Lógica de negocio
Angularjs Lógica de negocioAngularjs Lógica de negocio
Angularjs Lógica de negocio
 

Plus de Jose Naves Moura Neto

Iniciando no desenvolvimento android 2016
Iniciando no desenvolvimento android 2016Iniciando no desenvolvimento android 2016
Iniciando no desenvolvimento android 2016Jose Naves Moura Neto
 
Tutorial Android episódio 02 - Layout
Tutorial Android episódio 02 - LayoutTutorial Android episódio 02 - Layout
Tutorial Android episódio 02 - LayoutJose Naves Moura Neto
 
Preparando APKs para publicação na Google Play
Preparando APKs para publicação na Google PlayPreparando APKs para publicação na Google Play
Preparando APKs para publicação na Google PlayJose Naves Moura Neto
 
Como iniciar o desenvolvimento Android
Como iniciar o desenvolvimento AndroidComo iniciar o desenvolvimento Android
Como iniciar o desenvolvimento AndroidJose Naves Moura Neto
 
Tutorial AngularJS - episódio 9 - $http services
Tutorial AngularJS - episódio 9 - $http servicesTutorial AngularJS - episódio 9 - $http services
Tutorial AngularJS - episódio 9 - $http servicesJose Naves Moura Neto
 
Tutorial AngularJS - episódio 8 - serviços
Tutorial AngularJS - episódio 8 - serviçosTutorial AngularJS - episódio 8 - serviços
Tutorial AngularJS - episódio 8 - serviçosJose Naves Moura Neto
 
Tutorial AngularJS - episódio 2 - mvc
Tutorial AngularJS - episódio 2 -  mvcTutorial AngularJS - episódio 2 -  mvc
Tutorial AngularJS - episódio 2 - mvcJose Naves Moura Neto
 
Tutorial AngularJS - episódio 2 - Hello World
Tutorial AngularJS - episódio 2 -  Hello WorldTutorial AngularJS - episódio 2 -  Hello World
Tutorial AngularJS - episódio 2 - Hello WorldJose Naves Moura Neto
 
Tutorial AngularJS - episódio 1 - ambiente
Tutorial AngularJS - episódio 1 - ambienteTutorial AngularJS - episódio 1 - ambiente
Tutorial AngularJS - episódio 1 - ambienteJose Naves Moura Neto
 
Tutorial AngularJS - Episódio 4 - Controllers
Tutorial AngularJS - Episódio 4 - ControllersTutorial AngularJS - Episódio 4 - Controllers
Tutorial AngularJS - Episódio 4 - ControllersJose Naves Moura Neto
 
[Java] Contexts and Dependency Injection em JEE6
[Java] Contexts and Dependency Injection em JEE6[Java] Contexts and Dependency Injection em JEE6
[Java] Contexts and Dependency Injection em JEE6Jose Naves Moura Neto
 

Plus de Jose Naves Moura Neto (14)

Iniciando no desenvolvimento android 2016
Iniciando no desenvolvimento android 2016Iniciando no desenvolvimento android 2016
Iniciando no desenvolvimento android 2016
 
Tutorial Android episódio 02 - Layout
Tutorial Android episódio 02 - LayoutTutorial Android episódio 02 - Layout
Tutorial Android episódio 02 - Layout
 
Tutorial Android - Activities
Tutorial Android - ActivitiesTutorial Android - Activities
Tutorial Android - Activities
 
Preparando APKs para publicação na Google Play
Preparando APKs para publicação na Google PlayPreparando APKs para publicação na Google Play
Preparando APKs para publicação na Google Play
 
Como iniciar o desenvolvimento Android
Como iniciar o desenvolvimento AndroidComo iniciar o desenvolvimento Android
Como iniciar o desenvolvimento Android
 
Tutorial AngularJS - episódio 9 - $http services
Tutorial AngularJS - episódio 9 - $http servicesTutorial AngularJS - episódio 9 - $http services
Tutorial AngularJS - episódio 9 - $http services
 
Tutorial AngularJS - episódio 8 - serviços
Tutorial AngularJS - episódio 8 - serviçosTutorial AngularJS - episódio 8 - serviços
Tutorial AngularJS - episódio 8 - serviços
 
Tutorial AngularJS - episódio 2 - mvc
Tutorial AngularJS - episódio 2 -  mvcTutorial AngularJS - episódio 2 -  mvc
Tutorial AngularJS - episódio 2 - mvc
 
Tutorial AngularJS - episódio 2 - Hello World
Tutorial AngularJS - episódio 2 -  Hello WorldTutorial AngularJS - episódio 2 -  Hello World
Tutorial AngularJS - episódio 2 - Hello World
 
Tutorial AngularJS - episódio 1 - ambiente
Tutorial AngularJS - episódio 1 - ambienteTutorial AngularJS - episódio 1 - ambiente
Tutorial AngularJS - episódio 1 - ambiente
 
Tutorial AngularJS - Episódio 4 - Controllers
Tutorial AngularJS - Episódio 4 - ControllersTutorial AngularJS - Episódio 4 - Controllers
Tutorial AngularJS - Episódio 4 - Controllers
 
MEAN
MEANMEAN
MEAN
 
Programação reativa com Meteor
Programação reativa com MeteorProgramação reativa com Meteor
Programação reativa com Meteor
 
[Java] Contexts and Dependency Injection em JEE6
[Java] Contexts and Dependency Injection em JEE6[Java] Contexts and Dependency Injection em JEE6
[Java] Contexts and Dependency Injection em JEE6
 

Tutorial AngularJS - episódio 6 - filtros