Advertisement
Guest User

Untitled

a guest
Jul 20th, 2017
48
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.60 KB | None | 0 0
  1. angular.module("listaTelefonica", []);
  2. angular.module("listaTelefonica").controller("listaTelefonicaCtrl", function ($scope) {
  3.  
  4. $scope.contatos = [
  5. {nome: "Bernardo", telefone:"12345678"},
  6. {nome: "Rodrigo", telefone:"55555555"},
  7. {nome: "Fernanda", telefone:"99998888"},
  8. {nome: "Júlia", telefone:"70705000"}
  9. ];$scope.operadoras = [
  10. {nome: "Oi", codigo: 14, categoria:"Celular"},
  11. {nome: "Vivo", codigo: 15, categoria:"Celular"},
  12. {nome: "Claro", codigo: 60, categoria:"Celular"},
  13. {nome: "TIM", codigo: 41, categoria:"Celular"},
  14. {nome: "Embratel", codigo: 21, categoria: "Fixo"},
  15. {nome: "GVT", codigo: 99, categoria:"Fixo"}
  16. ];$scope.adicionarContato = function(contato) {
  17. $scope.contatos.push(angular.copy(contato));
  18. delete $scope.contato;
  19. }
  20. $scope.classe1 = "selecionado";
  21. $scope.classe2 = "negrito";
  22. $scope.apagarContato = function (contatos) {
  23. $scope.contatos = contatos.filter(function (contato) {
  24. if(!contato.selecionado) return contato;
  25. })
  26.  
  27. }
  28.  
  29. <!DOCTYPE html>
  30. <head>
  31. <meta charset="UTF-8">
  32. <title>Lista Telefônica</title>
  33. <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  34. <link rel="stylesheet" type="text/css" href="css/style.css">
  35. <script src="js/angular.min.js"></script>
  36. <script type="text/javascript" src="js/aula1.js"></script>
  37.  
  38. <body ng-controller="listaTelefonicaCtrl">
  39. <div class="jumbotron">
  40. <h3>{{app}}</h3>
  41. <table class="table table-striped">
  42. <tr>
  43. <th></th>
  44. <th>Nome</th>
  45. <th>Telefone</th>
  46. <th>Operadora</th>
  47. </tr>
  48. <tr ng-class="{selecionado: contato.selecionado, negrito: contato.selecionado}" ng-repeat="contato in contatos"> <!--Itera sobre os itens de uma coleção ou objeto-->
  49. <td><input type="checkbox" ng-model="contato.selecionado"/></td>
  50. <td>{{contato.nome}}</td>
  51. <td>{{contato.telefone}}</td>
  52. <td>{{contato.operadoras.nome}}</td>
  53. </tr>
  54. </table>
  55. <hr/>
  56. <input class="form-control" type="text" ng-model="contato.nome" placeholder="Nome"><br>
  57. <input class="form-control" type="text" ng-model="contato.telefone" placeholder="Telefone">
  58. <select class="form-control" ng-model="contato.operadoras" ng-options="operadora.nome group by operadora.categoria for operadora in operadoras">
  59. <option value="">Selecione uma operadora</option>
  60. </select>
  61. <button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="!contato.nome || !contato.telefone">Adicionar Contato </button>
  62. <button class="btn btn-danger btn-block" ng-click="apagarContatos(contatos)">Apagar Contato </button>
  63. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement