todo.html

<style>@import "css/base.css";</style>

<section id="todoapp">

  <header id="header">
    <h1>todos</h1>
    <input
      id="new-todo"
      placeholder="What needs to be done?"
      autofocus
      #newtodo
      (keyup)="enterTodo($event, newtodo)">
  </header>

  <section id="main">
    <input id="toggle-all" type="checkbox" (click)="toggleAll($event)">
    <label for="toggle-all">Mark all as complete</label>

    <ul id="todo-list">

      <li *ng-for="#todo of todoService.list">

        <div class="view"
            [class.hidden]="(todoEdit == todo || todoFilter == todo.completed)">

          <input class="toggle" type="checkbox"
                 (click)="completeMe(todo)"
                 [checked]="todo.completed">

          <label (dblclick)="editTodo($event, todo)">{{todo.title}}</label>
          <button class="destroy" (click)="deleteMe(todo)"></button>

        </div>

        <div>

          <input class="edit"
            [class.visible]="todoEdit == todo"
            [value]="todo.title"
            (keyup)="doneEditing($event, todo)">

        </div>

      </li>
    </ul>

  </section>

<!-- Add a (click) to Active and Completed to toggle display -->
  <footer id="footer">
    <span id="todo-count"></span>
    <div [class.hidden]="true"></div>
    <ul id="filters">
      <li>
        <a href="#/" (click)="showAll()">All</a>
      </li>
      <li>
        <a href="#/active" (click)="showActive()">Active</a>
      </li>
      <li>
        <a href="#/completed" (click)="showCompleted()">Completed</a>
      </li>
    </ul>
    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
  </footer>

</section>

<footer id="info">
  <p>Double-click to edit a todo</p>
  <p>Created by <a href="http://twitter.com/_davideast">David East</a></p>
</footer>