Utilizando diretivas com AngularJS

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

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

3. Rodrigo Branas [email protected] http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas

4. Certificações Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, 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. Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos, de forma declarativa.

7. Como funcionam as diretivas?

8. ngApp Definindo as fronteiras da 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>

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

23. ngController Vinculando um elemento da View ao Controller

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>

39. ngBind Substituindo o elemento por uma expressão

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>

47. Expressões

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

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>

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

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>

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>

81. ngModel Vinculando uma propriedade ao $scope

87. 1. <head> 2. <script src='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>

92. ngClick Atribuindo um comportamento ao evento

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. var app = 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>

105. 1. <script> 2. var app = 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>

109. 1. <script> 2. var app = 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>

112. 1. <script> 2. var app = 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. var app = 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>

116. 1. <script> 2. var app = 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. var app = 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>

120. 1. <script> 2. var app = 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. var app = 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>

125. 1. <script> 2. var app = 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. var app = 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. var app = 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>

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 elemento dinamicamente

137. 1. <script> 2. var app = 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. var app = 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. var app = 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. var app = 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. var app = 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>

143. ngClass Aplicando classes CSS dinamicamente

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>

160. ngOptions Renderiza as opções de um select

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>

184. ngShow e ngHide Exibindo um elemento condicionalmente

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ásicas importantes 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 (12)

Viewers also liked (20)

More from Rodrigo Branas (14)

Utilizando diretivas com AngularJS