temporally bound editing mode to a single click

architecture-examples/angularjs/css/overwrite.css

@@ -16,4 +16,31 @@ as AngularJS's show directive will keep track of hiding/showing the elements for
 /*this doesn't seem to be used in the jquery example at all. Its getting in the way */
 #todo-count span {
 	font-weight: inherit;
+}
+
+/*Figure out how to apply classes conditionally so that we can get rid of "editing-true" */
+#todo-list li.editing-true {
+	border-bottom: none;
+	margin-top: -1px;
+	padding: 0;
+}
+
+#todo-list li.editing-true:last-child {
+	margin-bottom: -1px;
+}
+
+#todo-list li.editing-true .edit {
+	display: block;
+	width: 444px;
+	padding: 13px 15px 14px 20px;
+	margin: 0;
+}
+
+#todo-list li.editing-true .view {
+	display: none;
+}
+
+#todo-list li.done-true label {
+	color: #777777;
+	text-decoration: line-through;
 }
\ No newline at end of file

architecture-examples/angularjs/index_new.html

@@ -21,13 +21,13 @@
             <input id="toggle-all" type="checkbox">
             <label for="toggle-all">Mark all as complete</label>
             <ul id="todo-list">
-                <li ng:repeat="todo in todos">
+                <li ng:repeat="todo in todos" ng:click="editTodo(todo)" ng:class="'editing-' + todo.editing + ' done-' + todo.done">
                     <div class="view">
                         <input class="toggle" type="checkbox" name="todo.done">
                         <label>{{ todo.content }}</label>
                         <a class="destroy" ng:click="removeTodo(todo)"></a>
                     </div>
-                    <input class="edit" type="text" value="{{title}}">
+                    <input class="edit" type="text" name="todo.content">
                 </li>
             </ul>
         </section>