-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtodo.html
85 lines (82 loc) · 3 KB
/
todo.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
<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="UTF-8">
<title>TO DO List</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script>
var model = {
user:"Adam"
};
var todoApp = angular.module("todoApp",[]);
//angular모듈객체에 정의된 run메서드는 초기설정마칠때 한번만 실행할 함수를 인자로 받음
todoApp.run(function ($http) {
$http.get("todo.json").success(function (data) {
model.items = data;
});
});
//필터팩터리는 함수 리턴 해야하고 안에 items는 angularjs에서 제공
todoApp.filter("checkedItems",function () {
return function (items,showComplete) {
var resultArr=[];
angular.forEach(items,function(item){
if(item.done == false || showComplete == true){
resultArr.push(item);
}
});
return resultArr;
}
});
todoApp.controller("ToDoCtrl",function ($scope) {
$scope.todo = model;
$scope.incompleteCount = function () {
var count=0;
angular.forEach($scope.todo.items,function (item) {
if(!item.done){count++}
});
return count;
}
$scope.warningLevel = function(){
return $scope.incompleteCount()<3 ? "label-success" : "label-warning";
}
$scope.addNewItem = function (actionText) {
$scope.todo.items.push({action:actionText,done:false});
}
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>{{todo.user}}'s To Do List
<span class="label label-default" ng-class="warningLevel()" ng-hide="incompleteCount()==0">{{incompleteCount()}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" ng-model="actionText" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="addNewItem(actionText)">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
</tr>
</tbody>
</table>
<div class="checkbox-inline">
<label><input type="checkbox" ng-model="showComplete" />Show Complete</label>
</div>
</div>
</body>
</html>