angular/index.html at master · thideoli/angular · 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
93
94
95
<!DOCTYPE html>
<html lang="pt-BR" ng-app="listaTelefonica">
	<head>
		<meta charset="UTF-8">

		<title>Lista Telefônica</title>

		<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/app.css">

		<script type="text/javascript" src="lib/angular/angular.min.js"></script>
		<script type="text/javascript" src="lib/angular/angular-locale_pt-br.js"></script>
		<script type="text/javascript" src="lib/jquery/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>

		<script type="text/javascript" src="js/app.js"></script>

		<script type="text/javascript" src="js/values/configValue.js"></script>

		<script type="text/javascript" src="js/controllers/listaTelefonicaCtrl.js"></script>

		<script type="text/javascript" src="js/config/serialGeneratorConfig.js"></script>

		<script type="text/javascript" src="js/services/contatosAPIService.js"></script>
		<script type="text/javascript" src="js/services/operadorasAPIService.js"></script>
		<script type="text/javascript" src="js/services/serialGeneratorService.js"></script>
	</head>
	<body ng-controller="listaTelefonicaCtrl">
		<div class="container">
			<div class="row">
				<div class="col-sm-offset-2 col-sm-8">
					<div class="jumbotron">
						<h3 class="text-center">{{app}}</h3>
						<input type="text"  class="form-control" ng-model="criterioDeBusca" placeholder="O que você quer?"><br>
						<table class="table" ng-show="contatos.length > 0">
							<thead>
								<tr>
									<th></th>
									<th>Serial</th>
									<th><a href="" ng-click="ordenarPor('nome')">Nome</a></th>
									<th><a href="" ng-click="ordenarPor('telefone')">Telefone</a></th>
									<th><a href="" ng-click="ordenarPor('operadora.nome')">Operadora</a></th>
									<th><a href="" ng-click="ordenarPor('data')">Data</a></th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								<tr ng-class="{'bg-warning text-warning': contato.selecionado}" ng-repeat="contato in contatos | filter:{nome: criterioDeBusca} | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao">
									<td>
										<input type="checkbox" ng-model="contato.selecionado">
									</td>
									<td>{{contato.serial}}</td>
									<td>{{contato.nome}}</td>
									<td>{{contato.telefone}}</td>
									<td>{{contato.operadora.nome | lowercase}}</td>
									<td>{{contato.data | date:'dd/MM/yyyy HH:mm'}}</td>
									<td>
										<div style="width: 22px; height: 22px;" ng-style="{'background-color': contato.operadora.cor}"></div>
									</td>
								</tr>
							</tbody>
						</table>
						<hr>
						<div ng-show="contatoForm.nome.$error.required && contatoForm.nome.$dirty" class="alert alert-danger">
							Preencha o nome.
						</div>
						<div ng-show="contatoForm.nome.$error.minlength" class="alert alert-danger">
							O nome dever ter no mínimo 2 caracteres.
						</div>
						<div ng-show="contatoForm.telefone.$error.required && contatoForm.telefone.$dirty" class="alert alert-danger">
							Preencha o telefone.
						</div>
						<div ng-show="contatoForm.telefone.$error.pattern" class="alert alert-danger">
							Preencha o telefone corretamente.
						</div>
						<div ng-show="contatoForm.operadora.$invalid && contatoForm.noperadoraome.$dirty" class="alert alert-danger">
							Selecione a operadora.
						</div>
						<form name="contatoForm">
							<input class="form-control" type="text" ng-model="contato.nome" name="nome" placeholder="Nome" ng-required="true" ng-minlength="2"><br>
							<input class="form-control" type="text" ng-model="contato.telefone" name="telefone" placeholder="Telefone" ng-required="true" ng-pattern="/^\d{4,5}-\d{4}$/"><br>
							<select class="form-control" name="operadora" ng-model="contato.operadora" ng-options="operadora.nome + ' (' + (operadora.preco | currency) + ') ' group by operadora.categoria for operadora in operadoras | orderBy:'nome'" ng-required="true">
								<option value="">Selecione uma operadora...</option>
							</select>
						</form>
						<br>
						<button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid">Adicionar contato</button>
						<button class="btn btn-danger btn-block" ng-click="apagarContatos(contatos)" ng-if="temContatoSelecionado(contatos)">Apagar contatos</button><br>
						<div ng-include="'views/footer.html'"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>