AngularJs/exemplo02.html at master · BrunoSalgadoti/AngularJs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html ng-app="aluguelCarro">

<head>
  <meta http-equiv="Content-Type" content="text/html;" charset="UTF-8" />
  <script src="./Js/angular.min.js"></script>
  <title>Aluguel de Carro - Versão 1</title>

  <script>
    var alugaCarro = angular.module("aluguelCarro", []);
    alugaCarro.controller("alugarCarroController", function ($scope) {
      $scope.carros = [
        {
          marca: "Chevrolet", modelo: "Onix", cor: "Preta",
          anoModelo: "2018", combustivel: "Flex"
        },
        {
          marca: "Chevrolet", modelo: "Blazer", cor: "Prata",
          anoModelo: "2016", combustivel: "Diesel"
        },
        {
          marca: "Ford", modelo: "Fiesta Hatch", cor: "Branca",
          anoModelo: "2016", combustivel: "Flex"
        },
        {
          marca: "Fiat", modelo: "Argo", cor: "Cinza",
          anoModelo: "2018", combustivel: "Flex"
        },
        {
          marca: "Honda", modelo: "City", cor: "Preta",
          anoModelo: "2017", combustivel: "Flex"
        },
        {
          marca: "Toyota", modelo: "Corolla", cor: "Cinza",
          anoModelo: "2016", combustivel: "Flex"
        },
        {
          marca: "Toyota", modelo: "Picape Hilux", cor: "Prata",
          anoModelo: "2018", combustivel: "Diesel"
        }
      ];
      $scope.adicionarCarro = function (carro) {
        $scope.carros.push(carro);
        delete $scope.carro;
      };

    });
  </script>
</head>

<body ng-controller="alugarCarroController">
  <H3>Aluguel de Carros -  Versão 1</H3>

  <table>
    <tr>
      <th>Marca</th>
      <th>Modelo</th>
      <th>Cor</th>
      <th>Ano Modelo</th>
      <th>Combustível</th>
    </tr>
    <tr ng-repeat="carro in carros">
      <th>{{carro.marca}}</th>
      <th>{{carro.modelo}}</th>
      <th>{{carro.cor}}</th>
      <th>{{carro.anoModelo}}</th>
      <th>{{carro.combustivel}}</th>
    </tr>
  </table>
  <hr>

  <p><label>Marca: </label>
    <input type="text" ng-model="carro.marca">
  </p>
  <p><label>Modelo: </label>
    <input type="text" ng-model="carro.modelo">
  </p>
  <p><label>Cor: </label>
    <input type="text" ng-model="carro.cor">
  </p>
  <p><label>Ano Modelo: </label>
    <input type="text" ng-model="carro.anoModelo">
  </p>
  <p><label>Combustível: </label>
    <input type="text" ng-model="carro.combustivel">
  </p>
  <br>
  <button ng-click="adicionarCarro(carro)">Adicionar</button>

</body>

</html>