AngularJS todo example

by Varun Krishna P

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()">Add new</a>

        <ul>
            <li ng-repeat="todo in todos">{{todo.Id}},{{todo.task}},{{todo.done}}</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.save($scope.newTodo).then(function (todo) {
                $scope.$apply(function () {
                    $scope.newTodo = null;
                    $scope.todos.push(todo);
                });
            });
        };
    }