-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
97 lines (79 loc) · 3.45 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
<!DOCTYPE html>
<html ng-app="ListaDeCosasPorHacer-App">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lista De Cosas Por Hacer</title>
<style>
.tachado{
text-decoration: line-through;
}
.gris{
color: gray;
}
.bold{
font-weight: bold;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 class="text-center">{{"Las Cosas Que Tengo Que Hacer" | uppercase}}</h1>
<div class="col-xs-offset-4 col-xs-4">
<div ng-controller="Controlador_Principal">
<form ng-submit="agregarCosa()">
<div class="input-group">
<input type="text" class="form-control" ng-model="cosaNueva" placeholder="¿Qué tienes que hacer?">
<span class="input-group-btn">
<input type="submit" class="btn btn-default" value="¡Agregar!">
</span>
</div><!-- /input-group -->
</form>
<hr>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFiltrar" aria-expanded="false" aria-controls="collapseFiltrar">
Filtrar lista
</a>
</h4>
</div>
<div id="collapseFiltrar" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="input-group">
<input type="text" id="filtroParaBuscar" class="form-control" ng-model="buscarCosa" placeholder="Buscar Cosa...">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="buscarCosa = ''">Borrar Filtro</button>
</span>
</div><!-- /input-group -->
</div>
</div>
</div>
<!-- Aplicamos el filtro personalizado "sinCompletar" -->
<p class="text-muted">¡Me quedan {{listaDeCosas | sinCompletar }} cosas por hacer!</p>
<ul>
<!-- Le indicamos a la directiva ng-repeat que queremos que filtre los elementos con base en el valor de "buscarCosa" -->
<li ng-repeat="cosa in listaDeCosas| filter:buscarCosa">
<!-- Usamos la directiva de Angular ng-model para representar el estado de cada tarea, por eso la almacenamos como valor booleano (true o false). Así la caja se mostrará "activada" cuando el estado en el objeto de ListaDeCosas sea igual a true -->
<input type="checkbox" ng-model="cosa.completada">
<!-- Ahora debemos apuntar a la propiedad "tarea" de cada objeto cosa para obtener el valor de texto que la representa -->
<label ng-class="{'tachado gris': cosa.completada, 'bold': !cosa.completada}">{{cosa.tarea}}</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>
<!-- Agregamos la referencia a la libería de AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- Nuestro código JavaScript de AngularJS -->
<script src="./scripts/app.js"></script>
</body>
</html>