-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (124 loc) · 4.4 KB
/
index.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html ng-app="listaTelefonica">
<meta charset="UTF-8">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<style>
.jumbotron{
width: 400px;
text-align: center;
margin-left:auto;
margin-right: auto;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
.centralizado{
margin-left:auto;
margin-right: auto;
text-align: center;
}
.table{
margin-top: 20px;
}
.form-control{
margin-bottom: 5px;
}
.selecionado{
background-color: yellow;
}
.negrito{
font-weight: bold;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="bootstrap/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
angular.module("listaTelefonica", []);
angular.module("listaTelefonica")
.controller("listaTelefonicaCtrl", function($scope){
$scope.app = "Lista Telefonica";
$scope.operadoras = [
{nome: "Oi", codigo: 14, categoria: "celular"},
{nome: "Vivo", codigo: 15, categoria: "celular"},
{nome: "Tim", codigo: 41, categoria: "celular"},
{nome: "GVT", codigo: 44, categoria: "fixo"},
{nome: "NET", codigo: 88, categoria: "fixo"}
];
$scope.contatos= [
{nome: "pedro", telefone: "99989955", cor: "blue"},
{nome: "Joao", telefone: "212222", cor: "yellow"},
{nome: "Alex", telefone: "33333", cor: "red"},
{nome: "Lana", telefone: "44444", cor: "green"},
{nome: "Melissa", telefone: "555555", cor: "gray"}
];
$scope.adicionarContato = function(contato){
$scope.contatos.push(angular.copy(contato));
delete $scope.contato;
$scope.contatoForm.$setPristine();
}
$scope.apagarContato = function(contatos){
$scope.contatos = contatos.filter(function(contato){
if(!contato.selecionado) return contato;
});
}
$scope.isContatoSelecionado = function(contatos){
return contatos.some(function(contato){
return contato.selecionado;
});
}
$scope.selecionado = "selecionado";
$scope.negrito = "negrito";
});
</script>
</head>
<body ng-controller="listaTelefonicaCtrl">
<div class="jumbotron">
<h3>{{app}}</h3>
<table class="table" ng-show="contatos.length > 0">
<thead>
<th></th>
<th>Nome</th>
<th>Telefone</th>
<th>Operadora</th>
<th></th>
</thead>
<TBODY>
<tr ng-class="{selecionado: contato.selecionado, negrito: contato.selecionado}" ng-repeat="contato in contatos">
<td><input type="checkbox" ng-model="contato.selecionado"/></td>
<td>{{contato.nome}}</td>
<td>{{contato.telefone}}</td>
<td>{{contato.operadora.nome}}</td>
<td><div style="width: 50px; height: 50px" ng-style="{'background-color': contato.cor}"></div></td>
</tr>
</TBODY>
</table>
É válido {{contatoForm.$valid}}
<br/>
É inválido {{contatoForm.$invalid}}
<form name="contatoForm">
<input class="form-control" ng-model="contato.nome" ng-required="true" type="text" placeholder="Nome" name="nome" ng-minlength="10">
<input class="form-control" ng-model="contato.telefone" ng-required="true" type="text" placeholder="telefone" name="telefone" ng-pattern="/^\d{4,5}-\d{4}/">
<select class="form-control" ng-model="contato.operadora" ng-required="true" ng-options="operadora.nome group by operadora.categoria for operadora in operadoras">
<option value="">Selecione uma operadora</option>
</select>
</form>
<div ng-messages="">
</div>
<div class="alert alert-danger" ng-show="contatoForm.nome.$error.required && contatoForm.nome.$dirty">
Por favor preencha o campo nome
</div>
<div class="alert alert-danger" ng-show="contatoForm.nome.$error.minlength" >
O campo nome deve possuir no mínimo 10 caracteres.
</div>
<div class="alert alert-danger" ng-show="contatoForm.telefone.$error.pattern" >
O campo telefone deve ter o formato DDDD-DDDD ou DDDDD-DDDD.
</div>
<button ng-disabled="contatoForm.$invalid" ng-click="adicionarContato(contato)" class="btn btn-block btn-primary" type="button">Adicionar Contato</button>
<button ng-disabled="!isContatoSelecionado(contatos)" ng-click="apagarContato(contatos)" class="btn btn-block btn-danger" ng-if="isContatoSelecionado(contatos)" type="button">Apagar Contato</button>
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>