Aplicando filtros com AngularJS

1.
Rodrigo Branas –@rodrigobranas - http://www.agilecode.com.br Aplicando Filtros com AngularJS

2.
“Transformar equipes dedesenvolvimento de software” http://www.agilecode.com.br

3.
Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • DesenvolvendoSoftware na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas

4.
Certificações Formação Acadêmica Ciências daComputação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCa st, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.

5.
• Há maisde 5 anos liderando pessoas. • Mais de 2000 horas em sala de aula. • Mais de 100 apresentações em eventos. • 6 artigos escritos para revistas. • 1 livro. • Mais de 500 profissionais treinados. • Criação de 22 palestras. • Criação de 10 treinamentos. • Criação de mais de 3.000 slides. O que realmente me motiva?

6.
Filtros São capazes detransformar o resultado de uma expressão para realizar operações como formatação de datas e conversão de moedas.

7.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>

10.
uppercase

11.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>

12.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome | uppercase}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>

13.

16.
lowercase

17.

18.

19.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome | }}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>

20.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome | lowercase}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>

21.

22.
filter

26.

27.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 7. </tr> 8. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 9. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 10. <td>{{contato.nome | lowercase}}</td> 11. <td>{{contato.telefone}}<td/> 12. <td>{{contato.operadora}}</td> 13. </tr> 14. </table> 15. <form name="contatoForm"> 16. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 17. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 18. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 19. </form> 20. <div ng-hide="contatoForm.$pristine"> 21. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 22. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 23. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 24. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 25. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 26. </div> 27. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 28. Adicionar

28.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 7. </tr> 8. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 9. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 10. <td>{{contato.nome | lowercase}}</td> 11. <td>{{contato.telefone}}<td/> 12. <td>{{contato.operadora}}</td> 13. </tr> 14. </table> 15. <form name="contatoForm"> 16. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 17. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 18. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 19. </form> 20. <div ng-hide="contatoForm.$pristine"> 21. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 22. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 23. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 24. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 25. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 26. </div> 27. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 28. Adicionar

29.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 7. </tr> 8. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 9. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 10. <td>{{contato.nome | lowercase}}</td> 11. <td>{{contato.telefone}}<td/> 12. <td>{{contato.operadora}}</td> 13. </tr> 14. </table> 15. <form name="contatoForm"> 16. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 17. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 18. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 19. </form> 20. <div ng-hide="contatoForm.$pristine"> 21. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 22. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 23. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 24. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 25. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 26. </div> 27. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 28. Adicionar

30.

31.
orderBy

34.

35.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th>Nome</th><th>Telefone</th><th>Operadora</th> 8. </tr> 9. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 10. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 11. <td>{{contato.nome | lowercase}}</td> 12. <td>{{contato.telefone}}<td/> 13. <td>{{contato.operadora}}</td> 14. </tr> 15. </table> 16. <form name="contatoForm"> 17. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 18. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 19. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 20. </form> 21. <div ng-hide="contatoForm.$pristine"> 22. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 23. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 24. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 25. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 26. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 27. </div> 28. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid">

36.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th>Nome</th> 8. <th>Telefone</th><th>Operadora</th> 9. </tr> 10. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 11. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 12. <td>{{contato.nome | lowercase}}</td> 13. <td>{{contato.telefone}}<td/> 14. <td>{{contato.operadora}}</td> 15. </tr> 16. </table> 17. <form name="contatoForm"> 18. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 19. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 20. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 21. </form> 22. <div ng-hide="contatoForm.$pristine"> 23. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 24. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 25. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 26. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 27. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 28. </div>

37.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th>Nome</th> 8. <th>Telefone</th> 9. <th>Operadora</th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome | lowercase}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <form name="contatoForm"> 19. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. </form> 23. <div ng-hide="contatoForm.$pristine"> 24. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 25. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 26. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 27. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 28. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span>

38.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th><a href="" ng-click="ordenarPor='nome'">Nome</a></th> 8. <th>Telefone</th> 9. <th>Operadora</th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome | lowercase}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <form name="contatoForm"> 19. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. </form> 23. <div ng-hide="contatoForm.$pristine"> 24. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 25. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 26. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 27. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 28. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span>

39.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th><a href="" ng-click="ordenarPor='nome'">Nome</a></th> 8. <th><a href="" ng-click="ordenarPor='telefone'">Telefone</a></th> 9. <th>Operadora</th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome | lowercase}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <form name="contatoForm"> 19. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. </form> 23. <div ng-hide="contatoForm.$pristine"> 24. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 25. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 26. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 27. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 28. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span>

40.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th><a href="" ng-click="ordenarPor='nome'">Nome</a></th> 8. <th><a href="" ng-click="ordenarPor='telefone'">Telefone</a></th> 9. <th><a href="" ng-click="ordenarPor='operadora'">Operadora</a></th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome | lowercase}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <form name="contatoForm"> 19. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. </form> 23. <div ng-hide="contatoForm.$pristine"> 24. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 25. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 26. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 27. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 28. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span>

41.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th><a href="" ng-click="ordenarPor='nome'">Nome</a></th> 8. <th><a href="" ng-click="ordenarPor='telefone'">Telefone</a></th> 9. <th><a href="" ng-click="ordenarPor='operadora'">Operadora</a></th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio |orderBy:ordernarPor"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome | lowercase}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <form name="contatoForm"> 19. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. </form> 23. <div ng-hide="contatoForm.$pristine"> 24. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 25. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 26. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 27. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span>

42.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th> 7. <th><a href="" ng-click="ordenarPor='nome'; direcao=!direcao">Nome</a></th> 8. <th><a href="" ng-click="ordenarPor='telefone'; direcao=!direcao">Telefone</a></th> 9. <th><a href="" ng-click="ordenarPor='operadora'; direcao=!direcao">Operadora</a></th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio |orderBy:ordernarPor:direcao"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome | lowercase}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <form name="contatoForm"> 19. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. </form> 23. <div ng-hide="contatoForm.$pristine"> 24. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 25. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 26. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 27. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span>

43.

44.
date

48.

49.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <h4>{{dataAtual}}</h4> 4. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 5. <table ng-show="contatos.length > 0"> 6. <tr> 7. <th></th> 8. <th><a href="" ng-click="ordenarPor='nome'; direcao=!direcao">Nome</a></th> 9. <th><a href="" ng-click="ordenarPor='telefone'; direcao=!direcao">Telefone</a></th> 10. <th><a href="" ng-click="ordenarPor='operadora'; direcao=!direcao">Operadora</a></th> 11. </tr> 12. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio |orderBy:ordernarPor:direcao"> 13. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 14. <td>{{contato.nome | lowercase}}</td> 15. <td>{{contato.telefone}}<td/> 16. <td>{{contato.operadora}}</td> 17. </tr> 18. </table> 19. <form name="contatoForm"> 20. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 21. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 22. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 23. </form> 24. <div ng-hide="contatoForm.$pristine"> 25. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 26. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 27. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span>

50.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <h4>{{dataAtual | date}}</h4> 4. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 5. <table ng-show="contatos.length > 0"> 6. <tr> 7. <th></th> 8. <th><a href="" ng-click="ordenarPor='nome'; direcao=!direcao">Nome</a></th> 9. <th><a href="" ng-click="ordenarPor='telefone'; direcao=!direcao">Telefone</a></th> 10. <th><a href="" ng-click="ordenarPor='operadora'; direcao=!direcao">Operadora</a></th> 11. </tr> 12. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio |orderBy:ordernarPor:direcao"> 13. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 14. <td>{{contato.nome | lowercase}}</td> 15. <td>{{contato.telefone}}<td/> 16. <td>{{contato.operadora}}</td> 17. </tr> 18. </table> 19. <form name="contatoForm"> 20. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 21. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 22. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 23. </form> 24. <div ng-hide="contatoForm.$pristine"> 25. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 26. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 27. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span>

51.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <h4>{{dataAtual | date:'dd/MM/yyyy hh:mm'}}</h4> 4. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 5. <table ng-show="contatos.length > 0"> 6. <tr> 7. <th></th> 8. <th><a href="" ng-click="ordenarPor='nome'; direcao=!direcao">Nome</a></th> 9. <th><a href="" ng-click="ordenarPor='telefone'; direcao=!direcao">Telefone</a></th> 10. <th><a href="" ng-click="ordenarPor='operadora'; direcao=!direcao">Operadora</a></th> 11. </tr> 12. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio |orderBy:ordernarPor:direcao"> 13. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 14. <td>{{contato.nome | lowercase}}</td> 15. <td>{{contato.telefone}}<td/> 16. <td>{{contato.operadora}}</td> 17. </tr> 18. </table> 19. <form name="contatoForm"> 20. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 21. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 22. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 23. </form> 24. <div ng-hide="contatoForm.$pristine"> 25. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 26. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 27. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span>

52.
1. <body ng-controller="listaTelefonicaCtrl"> 2.<h1>{{titulo}}</h1> 3. <h4>{{dataAtual | date:'dd/MM/yyyy hh:mm'}}</h4> 4. <input type="text" ng-model="criterio" placeholder="Busque por nome ou telefone"/> 5. <table ng-show="contatos.length > 0"> 6. <tr> 7. <th></th> 8. <th><a href="" ng-click="ordenarPor='nome'; direcao=!direcao">Nome</a></th> 9. <th><a href="" ng-click="ordenarPor='telefone'; direcao=!direcao">Telefone</a></th> 10. <th><a href="" ng-click="ordenarPor='operadora'; direcao=!direcao">Operadora</a></th> 11. </tr> 12. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos | filter:criterio |orderBy:ordernarPor:direcao"> 13. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 14. <td>{{contato.nome | lowercase}}</td> 15. <td>{{contato.telefone}}<td/> 16. <td>{{contato.operadora}}</td> 17. </tr> 18. </table> 19. <form name="contatoForm"> 20. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 21. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 22. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 23. </form> 24. <div ng-hide="contatoForm.$pristine"> 25. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 26. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 27. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span>

53.
Outros filtros básicosimportantes currency – Exibe um número conforme a moeda corrente. json – Exibe um objeto no formato JSON. number – Similar ao currency, formata um número de acordo com a quantidade de casas decimais desejadas. limitTo – Exibe uma determinada quantidade de itens de um Array ou caracteres de uma String.

Aplicando filtros com AngularJS

More Related Content

More from Rodrigo Branas

Aplicando filtros com AngularJS