AngularJS todo example

angularjs blog - update done state

by JayData

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()" /> 
                <a href="#" ng-click="remove(todo)">Remove item</a>
            </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.remove = function (todo) {
            todo.remove()
                .then(function() {
                    $scope.$apply(function() {
                       var todos = $scope.todos;
                       todos.splice(todos.indexOf(todo), 1);
                    });
                })
               .fail(function(err) {
                   alert("Error deleting item");
               });
        }

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