Aplicando filtros com AngularJS

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

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

3. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • Desenvolvendo Software 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 da Computaçã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á mais de 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 de transformar 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>

16. lowercase

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>

22. filter

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

31. orderBy

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>

44. date

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ásicos importantes 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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Rodrigo Branas

Mais de Rodrigo Branas (20)

Aplicando filtros com AngularJS