index.html
1.8 KB
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
<!DOCTYPE html>
<html ng-app="todoapp">
<head>
<title>TodoApp</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style type="text/css">
.done {
text-decoration: line-through;
color:#ccc;
}
button{
display:none;
}
.delete:hover button{
display:inline;
}
</style>
</head>
<body>
<div class="container" ng-controller="TodoCtrl">
<h1>Todo List App</h1>
<table class="table">
<thead>
<tr>
<th>Tasks</th>
<!--<th>Description</th>-->
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="task" type="text" class="form-control" ng-model="task.taskname" required></td>
<!--<td><textarea ng-model="task.details" rows="2" cols="50"required></textarea></td>-->
<td><button class="btn btn-primary" ng-click="addTask()">Add Task</button></td>
</tr>
<tr ng-repeat="todo in todolist.slice().reverse()">
<!--<td><input type="checkbox" ng-model="todo.done">
<span ng-class="{'done':todo.done}">{{todo.taskname}}</span>-->
<td colspan="3">
<div class=delete><button ng-click="deleteTask(todo._id)" align="right">Delete</button> <input type="checkbox" ng-model="todo.Done" ng-checked="todo.Done" ng-click="updateTask(todo)"> <span ng-class="(todo.Done==true)? 'done':''">{{todo.taskname}}</span></div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
<!--ng-change="markTaskDone()" -->