Utilizando diretivas com AngularJS

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

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

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

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

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

6.
Diretivas são extensõesda linguagem HTML que permitem a implementação de novos comportamentos, de forma declarativa.

7.
Como funcionam asdiretivas?

8.
ngApp Definindo as fronteirasda aplicação

9.
1. <html> 2. </html>

10.
1. <html ng-app> 2.</html>

11.
1. <html ng-app> 2.</html>

12.
1. <html ng-app="listaTelefonica"> 2.</html>

13.
1. <html ng-app="listaTelefonica"> 2.</html>

14.
1. <html ng-app="listaTelefonica"> 2.<head> 3. </head> 4. </html>

15.
1. <html ng-app="listaTelefonica"> 2.<head> 3. </head> 4. </html>

16.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. </head> 5. </html>

17.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. </head> 5. </html>

18.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>

19.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>

20.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. </script> 7. </head> 8. </html>

21.

22.
Apenas uma aplicaçãoAngularJS pode ser carregada por documento HTML, nesse caso, apenas o primeiro elemento com ngApp será considerado.

23.
ngController Vinculando um elementoda View ao Controller

24.

25.

26.

27.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller(); 7. </script> 8. </head> 9. </html>

28.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller(); 7. </script> 8. </head> 9. </html>

29.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl"); 7. </script> 8. </head> 9. </html>

30.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl"); 7. </script> 8. </head> 9. </html>

31.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. </html>

32.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. </html>

33.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body> 11. </body> 12. </html>

34.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body> 11. </body> 12. </html>

35.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body ng-controller=""> 11. </body> 12. </html>

36.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body ng-controller=""> 11. </body> 12. </html>

37.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. </body> 12. </html>

38.

39.
ngBind Substituindo o elementopor uma expressão

42.

43.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1 ng-bind="titulo"></h1> 12. </body> 13. </html>

44.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. }); 8. </script> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1 ng-bind="titulo"></h1> 12. </body> 13. </html>

45.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <h1 ng-bind="titulo"></h1> 13. </body> 14. </html>

46.

47.
Expressões

48.
Expressões São trechos decódigo escritos entre chaves duplas ({{ e }}) utilizados basicamente para acessar e exibir atributos do $scope.

49.

50.

51.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <h1></h1> 13. </body> 14. </html>

52.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <h1>{{titulo}}</h1> 13. </body> 14. </html>

53.

54.
ngRepeat Iterando sobre ositens de uma coleção ou de um objeto

57.

58.

59.

60.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = []; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. </body> 15. </html>

61.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = []; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. </body> 15. </html>

62.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. </body> 17. </html>

63.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. </body> 17. </html>

64.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. </table> 18. </body> 19. </html>

65.

66.

67.

68.

69.

70.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. </tr> 19. </table> 20. </body> 21. </html>

71.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. </tr> 19. </table> 20. </body> 21. </html>

72.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. </table> 21. </body> 22. </html>

73.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. </table> 21. </body> 22. </html>

74.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr> 21. </tr> 22. </table> 23. </body> 24. </html>

75.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr> 21. </tr> 22. </table> 23. </body> 24. </html>

76.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat=""> 21. </tr> 22. </table> 23. </body> 24. </html>

77.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. </tr> 22. </table> 23. </body> 24. </html>

78.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. </tr> 22. </table> 23. </body> 24. </html>

79.
1. <html ng-app="listaTelefonica"> 2.<head> 3. <script src='angular.js'></script> 4. <script> 5. var app = angular.module("listaTelefonica", []); 6. app.controller("listaTelefonicaCtrl", function ($scope) { 7. $scope.titulo = "Lista Telefônica"; 8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 9. {nome: "André", telefone: "99767899"}, 10. {nome: "Carlos", telefone: "99987689"}]; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. </body> 25. </html>

80.

81.
ngModel Vinculando uma propriedadeao $scope

84.

85.

86.

87.
1. <head> 2. <scriptsrc='angular.js'></script> 3. <script> 4. var app = angular.module("listaTelefonica", []); 5. app.controller("listaTelefonicaCtrl", function ($scope) { 6. $scope.titulo = "Lista Telefônica"; 7. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 8. {nome: "André", telefone: "99767899"}, 9. {nome: "Carlos", telefone: "99987689"}]; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 21. </tr> 22. </table> 23. </body> 24. </html>

88.
1. <script src='angular.js'></script> 2.<script> 3. var app = angular.module("listaTelefonica", []); 4. app.controller("listaTelefonicaCtrl", function ($scope) { 5. $scope.titulo = "Lista Telefônica"; 6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 7. {nome: "André", telefone: "99767899"}, 8. {nome: "Carlos", telefone: "99987689"}]; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-repeat="contato in contatos"> 19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. </body> 23. </html>

89.
1. <script src='angular.js'></script> 2.<script> 3. var app = angular.module("listaTelefonica", []); 4. app.controller("listaTelefonicaCtrl", function ($scope) { 5. $scope.titulo = "Lista Telefônica"; 6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 7. {nome: "André", telefone: "99767899"}, 8. {nome: "Carlos", telefone: "99987689"}]; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-repeat="contato in contatos"> 19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="nome" placeholder="Nome"/> 23. </body> 24. </html>

90.
1. <script src='angular.js'></script> 2.<script> 3. var app = angular.module("listaTelefonica", []); 4. app.controller("listaTelefonicaCtrl", function ($scope) { 5. $scope.titulo = "Lista Telefônica"; 6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 7. {nome: "André", telefone: "99767899"}, 8. {nome: "Carlos", telefone: "99987689"}]; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-repeat="contato in contatos"> 19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="nome" placeholder="Nome"/> 23. <input type="text" ng-model="telefone" placeholder="Telefone"/> 24. </body> 25. </html>

91.

92.
ngClick Atribuindo um comportamentoao evento

97.

98.
1. <script src='angular.js'></script> 2.<script> 3. var app = angular.module("listaTelefonica", []); 4. app.controller("listaTelefonicaCtrl", function ($scope) { 5. $scope.titulo = "Lista Telefônica"; 6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 7. {nome: "André", telefone: "99767899"}, 8. {nome: "Carlos", telefone: "99987689"}]; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-repeat="contato in contatos"> 19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="nome" placeholder="Nome"/> 23. <input type="text" ng-model="telefone" placeholder="Telefone"/> 24. <button>Adicionar</button> 25. </body> 26. </html>

99.
1. <script src='angular.js'></script> 2.<script> 3. var app = angular.module("listaTelefonica", []); 4. app.controller("listaTelefonicaCtrl", function ($scope) { 5. $scope.titulo = "Lista Telefônica"; 6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 7. {nome: "André", telefone: "99767899"}, 8. {nome: "Carlos", telefone: "99987689"}]; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-repeat="contato in contatos"> 19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="nome" placeholder="Nome"/> 23. <input type="text" ng-model="telefone" placeholder="Telefone"/> 24. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 25. </body> 26. </html>

100.
1. <script src='angular.js'></script> 2.<script> 3. var app = angular.module("listaTelefonica", []); 4. app.controller("listaTelefonicaCtrl", function ($scope) { 5. $scope.titulo = "Lista Telefônica"; 6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 7. {nome: "André", telefone: "99767899"}, 8. {nome: "Carlos", telefone: "99987689"}]; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-repeat="contato in contatos"> 19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="nome" placeholder="Nome"/> 23. <input type="text" ng-model="telefone" placeholder="Telefone"/> 24. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 25. </body> 26. </html>

101.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <h1>{{titulo}}</h1> 13. <table> 14. <tr> 15. <th>Nome</th><th>Telefone</th> 16. </tr> 17. <tr ng-repeat="contato in contatos"> 18. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 19. </tr> 20. </table> 21. <input type="text" ng-model="nome" placeholder="Nome"/> 22. <input type="text" ng-model="telefone" placeholder="Telefone"/> 23. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 24. </body> 25. </html>

102.

103.

104.

105.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (nome, telefone) { 9. $scope.contatos.push({nome: nome, telefone: telefone}); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="nome" placeholder="Nome"/> 25. <input type="text" ng-model="telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 27. </body> 28. </html>

106.

108.

109.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (nome, telefone) { 9. $scope.contatos.push({nome: nome, telefone: telefone}); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 27. </body> 28. </html>

110.

111.

112.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (nome, telefone) { 9. $scope.contatos.push({nome: nome, telefone: telefone}); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato()">Adicionar</button> 27. </body> 28. </html>

113.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (nome, telefone) { 9. $scope.contatos.push({nome: nome, telefone: telefone}); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

114.

115.

116.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function () { 9. $scope.contatos.push({nome: nome, telefone: telefone}); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

117.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push({nome: nome, telefone: telefone}); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

118.

119.

120.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

121.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(contato); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

122.

124.

125.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

126.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)">Adicionar</button> 27. </body> 28. </html>

127.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. delete $scope.contato; 11. }; 12. }); 13. </script> 14. </head> 15. <body ng-controller="listaTelefonicaCtrl"> 16. <h1>{{titulo}}</h1> 17. <table> 18. <tr> 19. <th>Nome</th><th>Telefone</th> 20. </tr> 21. <tr ng-repeat="contato in contatos"> 22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)">Adicionar</button> 28. </body>

128.

129.
Outros eventos suportados ngBlur– Executado ao sair do campo ngCopy – Executado ao utilizar o comando Ctrl+C ngCut – Executado ao utilizar o comando Ctrl+X ngDblClick – Executado ao clicar duas vezes ngFocus – Executado ao focas no campo ngKeyDown – Executado ao pressionar uma tecla ngKeyUp – Executado ao soltar uma tecla ngMousedown – Executado ao apertar o botão do mouse ngMouseenter – Executado ao passar o cursor do mouse ngMouseleave – Executado ao sair com o cursor do mouse ngMousemove – Executado ao mover com o mouse ngMouseover – Executado ao passar com o mouse por cima ngMouseup - Executado ao soltar o botão do mouse ngPaste - Executado ao utilizar o comando Ctrl+V

130.
ngDisable Desabilitando um elementodinamicamente

135.

136.

137.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. delete $scope.contato; 11. }; 12. }); 13. </script> 14. </head> 15. <body ng-controller="listaTelefonicaCtrl"> 16. <h1>{{titulo}}</h1> 17. <table> 18. <tr> 19. <th>Nome</th><th>Telefone</th> 20. </tr> 21. <tr ng-repeat="contato in contatos"> 22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)">Adicionar</button> 28. </body> 29. </html>

138.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. delete $scope.contato; 11. }; 12. }); 13. </script> 14. </head> 15. <body ng-controller="listaTelefonicaCtrl"> 16. <h1>{{titulo}}</h1> 17. <table> 18. <tr> 19. <th>Nome</th><th>Telefone</th> 20. </tr> 21. <tr ng-repeat="contato in contatos"> 22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)">Adicionar</button> 28. </body> 29. </html>

139.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. delete $scope.contato; 11. }; 12. }); 13. </script> 14. </head> 15. <body ng-controller="listaTelefonicaCtrl"> 16. <h1>{{titulo}}</h1> 17. <table> 18. <tr> 19. <th>Nome</th><th>Telefone</th> 20. </tr> 21. <tr ng-repeat="contato in contatos"> 22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)"> 28. Adicionar 29. </button> 30. </body>

140.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. delete $scope.contato; 11. }; 12. }); 13. </script> 14. </head> 15. <body ng-controller="listaTelefonicaCtrl"> 16. <h1>{{titulo}}</h1> 17. <table> 18. <tr> 19. <th>Nome</th><th>Telefone</th> 20. </tr> 21. <tr ng-repeat="contato in contatos"> 22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled=""> 28. Adicionar 29. </button> 30. </body>

141.
1. <script> 2. varapp = angular.module("listaTelefonica", []); 3. app.controller("listaTelefonicaCtrl", function ($scope) { 4. $scope.titulo = "Lista Telefônica"; 5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 6. {nome: "André", telefone: "99767899"}, 7. {nome: "Carlos", telefone: "99987689"}]; 8. $scope.adicionarContato = function (contato) { 9. $scope.contatos.push(angular.copy(contato)); 10. delete $scope.contato; 11. }; 12. }); 13. </script> 14. </head> 15. <body ng-controller="listaTelefonicaCtrl"> 16. <h1>{{titulo}}</h1> 17. <table> 18. <tr> 19. <th>Nome</th><th>Telefone</th> 20. </tr> 21. <tr ng-repeat="contato in contatos"> 22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

142.

143.
ngClass Aplicando classes CSSdinamicamente

146.

147.
1. var app= angular.module("listaTelefonica", []); 2. app.controller("listaTelefonicaCtrl", function ($scope) { 3. $scope.titulo = "Lista Telefônica"; 4. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 5. {nome: "André", telefone: "99767899"}, 6. {nome: "Carlos", telefone: "99987689"}]; 7. $scope.adicionarContato = function (contato) { 8. $scope.contatos.push(angular.copy(contato)); 9. delete $scope.contato; 10. }; 11. }); 12. </script> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

148.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

149.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

150.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

151.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td></td><td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

152.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td></td> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

153.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td></td> 21. <td>{{contato.nome}}</td> 22. <td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

154.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 21. <td>{{contato.nome}}</td> 22. <td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

155.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-repeat="contato in contatos"> 20. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 21. <td>{{contato.nome}}</td> 22. <td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

156.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 20. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 21. <td>{{contato.nome}}</td> 22. <td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

157.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 20. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 21. <td>{{contato.nome}}</td> 22. <td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

158.
1. app.controller("listaTelefonicaCtrl", function($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 4. {nome: "André", telefone: "99767899"}, 5. {nome: "Carlos", telefone: "99987689"}]; 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. }); 11. </script> 12. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 13. </head> 14. <body ng-controller="listaTelefonicaCtrl"> 15. <h1>{{titulo}}</h1> 16. <table> 17. <tr> 18. <th></th><th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 21. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 22. <td>{{contato.nome}}</td> 23. <td>{{contato.telefone}}<td/> 24. </tr> 25. </table> 26. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 27. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 28. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 29. Adicionar 30. </button>

159.

160.
ngOptions Renderiza as opçõesde um select

164.

165.
1. $scope.titulo ="Lista Telefônica"; 2. $scope.contatos = [{nome: "Pedro", telefone: "99991010"}, 3. {nome: "André", telefone: "99767899"}, 4. {nome: "Carlos", telefone: "99987689"}]; 5. $scope.adicionarContato = function (contato) { 6. $scope.contatos.push(angular.copy(contato)); 7. delete $scope.contato; 8. }; 9. }); 10. </script> 11. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 12. </head> 13. <body ng-controller="listaTelefonicaCtrl"> 14. <h1>{{titulo}}</h1> 15. <table> 16. <tr> 17. <th></th><th>Nome</th><th>Telefone</th> 18. </tr> 19. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 20. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 21. <td>{{contato.nome}}</td> 22. <td>{{contato.telefone}}<td/> 23. </tr> 24. </table> 25. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>

166.
1. $scope.contatos =[{nome: "Pedro", telefone: "99991010"}, 2. {nome: "André", telefone: "99767899"}, 3. {nome: "Carlos", telefone: "99987689"}]; 4. $scope.adicionarContato = function (contato) { 5. $scope.contatos.push(angular.copy(contato)); 6. delete $scope.contato; 7. }; 8. }); 9. </script> 10. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. <table> 15. <tr> 16. <th></th><th>Nome</th><th>Telefone</th> 17. </tr> 18. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 19. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 20. <td>{{contato.nome}}</td> 21. <td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

167.
1. {nome: "André",telefone: "99767899"}, 2. {nome: "Carlos", telefone: "99987689"}]; 3. $scope.adicionarContato = function (contato) { 4. $scope.contatos.push(angular.copy(contato)); 5. delete $scope.contato; 6. }; 7. }); 8. </script> 9. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <h1>{{titulo}}</h1> 13. <table> 14. <tr> 15. <th></th><th>Nome</th><th>Telefone</th> 16. </tr> 17. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 18. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 19. <td>{{contato.nome}}</td> 20. <td>{{contato.telefone}}<td/> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

168.
1. {nome: "Carlos",telefone: "99987689"}]; 2. $scope.adicionarContato = function (contato) { 3. $scope.contatos.push(angular.copy(contato)); 4. delete $scope.contato; 5. }; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 25. Adicionar 26. </button> 27. </body> 28. </html>

169.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. }); 6. </script> 7. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 8. </head> 9. <body ng-controller="listaTelefonicaCtrl"> 10. <h1>{{titulo}}</h1> 11. <table> 12. <tr> 13. <th></th><th>Nome</th><th>Telefone</th> 14. </tr> 15. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 16. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 17. <td>{{contato.nome}}</td> 18. <td>{{contato.telefone}}<td/> 19. </tr> 20. </table> 21. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 22. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 23. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 24. Adicionar 25. </button> 26. </body> 27. </html>

170.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. }); 6. </script> 7. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 8. </head> 9. <body ng-controller="listaTelefonicaCtrl"> 10. <h1>{{titulo}}</h1> 11. <table> 12. <tr> 13. <th></th><th>Nome</th><th>Telefone</th> 14. </tr> 15. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 16. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 17. <td>{{contato.nome}}</td> 18. <td>{{contato.telefone}}<td/> 19. </tr> 20. </table> 21. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 22. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 23. <select></select> 24. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 25. Adicionar 26. </button> 27. </body> 28. </html>

171.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. }); 6. </script> 7. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 8. </head> 9. <body ng-controller="listaTelefonicaCtrl"> 10. <h1>{{titulo}}</h1> 11. <table> 12. <tr> 13. <th></th><th>Nome</th><th>Telefone</th> 14. </tr> 15. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 16. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 17. <td>{{contato.nome}}</td> 18. <td>{{contato.telefone}}<td/> 19. </tr> 20. </table> 21. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 22. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 23. <select ng-model="contato.operadora"></select> 24. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 25. Adicionar 26. </button> 27. </body> 28. </html>

172.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. }); 6. </script> 7. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 8. </head> 9. <body ng-controller="listaTelefonicaCtrl"> 10. <h1>{{titulo}}</h1> 11. <table> 12. <tr> 13. <th></th><th>Nome</th><th>Telefone</th> 14. </tr> 15. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 16. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 17. <td>{{contato.nome}}</td> 18. <td>{{contato.telefone}}<td/> 19. </tr> 20. </table> 21. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 22. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 23. <select ng-model="contato.operadora" ng-options=""></select> 24. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 25. Adicionar 26. </button> 27. </body> 28. </html>

173.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = []; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options=""></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

174.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options=""></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

175.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options=""></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

176.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

177.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

178.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th></th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

179.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

180.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>

181.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. <td></td> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

182.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. <td>{{contato.operadora}}</td> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

183.

184.
ngShow e ngHide Exibindoum elemento condicionalmente

188.

189.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table ng-show=""> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. <td>{{contato.operadora}}</td> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

190.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table ng-show="contatos.length > 0"> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. <td>{{contato.operadora}}</td> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

191.
1. $scope.adicionarContato =function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table ng-show="contatos.length > 0"> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. <td>{{contato.operadora}}</td> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>

192.
Outras diretivas básicasimportantes ngBindHtml – Similar ao ngBind, no entanto interpreta o conteúdo da expressão. Requer a utilização do módulo ngSanitize para evitar ataques do tipo XSS (Cross-site scripting). ngChange – Utilizado para executar a expressão ao ocorrer uma alteração em um campo de entrada. ngInclude – Utilizado para incluir o conteúdo de um outro documento HTML. ngIf – Similar ao ngShow, exibe ou não um elemento. No entanto, não atua sobre a visibilidade, atuando diretamente na DOM. ngSwitch – Possibilidade de criar uma lógica condicional composta. ngStyle – Similar ao ngClass, atua sobre a propriedade style.

Utilizando diretivas com AngularJS

More Related Content

What's hot

Viewers also liked

More from Rodrigo Branas

Utilizando diretivas com AngularJS