Más contenido relacionado Más de Rodrigo Branas (20) Aplicando filtros com AngularJS1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Aplicando Filtros
com AngularJS
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>
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. 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>
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 | 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>
18. 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>
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. 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>
26. 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>
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. 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
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><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
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. 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>
48. 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>
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.