AngularJS todo example

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="App">
      <h1>Todo list - local database</h1>
        <div ng-controller="TodoCtrl">
            {{message}}<br />
            New task:<input ng-model="newTask" />
            <a href="#" ng-click="addNew()">Add new</a>
          <ul>
            <li ng-repeat="todo in todos">
                Id: {{todo.Id}}<br />
                Task: {{todo.task}}<br />
                Completed: <input type="checkbox" ng-model="todo.done" ng-click="todo.save()"/><br />
                <a href="#" ng-click="remove()">Remove</a>
            </li>
          </ul>
        </div>
    </div>

JavaScript

var app = angular.module('App',[]);
function TodoCtrl($scope) {
    $scope.todos = [];
    
    $data.define("Todo", {
        task: String,
        done: Boolean
    });
    
    $data("Todo").readAll().then(function (items) {
        $scope.$apply(function () {
            $scope.todos = items;
        });
    });
    
    $scope.remove = function () {
        this.todo.remove().then(function () {
            $scope.$apply(function () {
                $scope.todos.splice(this.$index, 1);
            });
        });
    };
    
    
    $scope.addNew = function () {
        $data('Todo').save({
            task: $scope.newTask
        }).then(function (t) {
            $scope.$apply(function () {
                $scope.newTask = "";
                $scope.message = 'Press F5/Reload to check items are stored locally';
                $scope.todos.push(t);
            });
        });
    };
}