Aplicando filtros com AngularJS

9,880 views

Published on

Aprenda a aplicar filtros com AngularJS

Published in: Technology
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
9,880
On SlideShare
0
From Embeds
0
Number of Embeds
4,460
Actions
Shares
0
Downloads
0
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide

Aplicando filtros com AngularJS

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Aplicando Filtros com AngularJS
  2. 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  3. 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. 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. 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. 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. 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>
  8. 8. uppercase
  9. 9. 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. 10. 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>
  11. 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 | 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>
  12. 12. lowercase
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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>
  17. 17. 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>
  18. 18. filter
  19. 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 | 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>
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. orderBy
  25. 25. 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
  26. 26. 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">
  27. 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> 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>
  28. 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> 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>
  29. 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> 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>
  30. 30. 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>
  31. 31. 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>
  32. 32. 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>
  33. 33. 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>
  34. 34. 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>
  35. 35. date
  36. 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><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>
  37. 37. 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>
  38. 38. 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>
  39. 39. 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>
  40. 40. 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>
  41. 41. 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.

×