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 rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas

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

Utilizando diretivas com AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

More from Rodrigo Branas

More from Rodrigo Branas (14)

Utilizando diretivas com AngularJS