AngularJS todo example

angularjs blog - update done state

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<div ng-app>
  <h1>Todo list - store items to local database</h1>

  <h3>Use Google chomre to inspect the content of the local database by pressing F12 and selecting the Resources tab</h3>

  <div ng-controller="TodoCtrl">
    <label>Task:</label>
    <input ng-model="newTodo.task" />
    <label>Completed:</label>
    <input type="checkbox" ng-model="newTodo.done" />
    <a href="#" ng-click="addNew(newTodo)">Add new</a>

    <ul>
      <li ng-repeat="todo in todos">{{todo.Id}},{{todo.task}}, Completed:
        <input type="checkbox" ng-model="todo.done" ng-click="todo.save()" /> </li>
    </ul>
  </div>
</div>

JavaScript

function TodoCtrl($scope) {
      $scope.todos = [];

      var Todo = $data.define("Todo", {
        task: String,
        done: Boolean
      });

      Todo.readAll().then(function(todos) {
        $scope.$apply(function() {
          $scope.todos = todos;
        });
      });

      $scope.addNew = function(todo) {
        Todo.save(todo).then(function(todo) {
          $scope.$apply(function() {
            $scope.newTodo = null;
            $scope.todos.push(todo);
          });
        });
      };
    }