forked from simonguest/jqm-angular-sample
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (74 loc) · 3.21 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
<!DOCTYPE html>
<html ng-app="TodoService">
<head>
<title>jQM Angular Sample</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="public/js/services.js"></script>
<script src="public/js/controllers.js"></script>
</head>
<body ng-controller="TodoController">
<!--Todo List Page-->
<div id="todo-list" data-role="page">
<div data-role="header">
<h1>Angular Todo</h1>
<a href="#todo-detail" ng-click="newTodo()" data-icon="add" class="ui-btn-right">New</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li ng-repeat="todo in todos">
<a href="#todo-detail" data-transition="slide" ng-click="selectTodo(todo._id)" value="{{todo._id}}">{{todo.description}}</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<p>{{todos.length}} Tasks Remaining</p>
</div>
</div>
<!--Todo Detail Page-->
<div id="todo-detail" data-role="page">
<div data-role="header">
<a href="#" data-icon="back" data-rel="back">Back</a>
<h1>{{todo.description}}</h1>
<a href="#todo-list" ng-click="saveTodo()" data-icon="check" class="ui-btn-right">Save</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="description">Description</label>
<input id="description" type="text" ng-model="todo.description"/>
</li>
<li data-role="fieldcontain">
<label for="body">Body</label>
<textarea id="body" cols="40" rows="8" ng-model="todo.body"></textarea>
</li>
<li data-role="fieldcontain">
<label for="project">Project</label>
<input id="project" type="text" ng-model="todo.project"/>
</li>
<li data-role="fieldcontain">
<label for="context">Context</label>
<input id="context" type="text" ng-model="todo.context"/>
</li>
<li data-role="fieldcontain">
<label for="duedate">Due Date</label>
<input id="duedate" type="date" ng-model="todo.duedate"/>
</li>
</ul>
<button data-inline="true" onclick="$.mobile.changePage('#todo-list')" ng-click="completeTodo(todo._id)">
Complete Task
</button>
</div>
<div data-role="footer" data-position="fixed">
<p>Task ID: {{todo._id}}</p>
</div>
</div>
</body>
</html>