Snippets

Tapit Inc. TODO Application Challenge

You are viewing an old version of this snippet. View the current version.
Revised by Toshiyuki Tanaka 86ac47b
<!doctype html>
<html ng-app="todoApp">
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script>
            angular.module('todoApp', [])
                .controller('TodoListController', function() {
                    var todoList = this;
                    todoList.todos = [];
             
                    todoList.addTodo = function() {
                        todoList.todos.push({text:todoList.todoText, done:false});
                        todoList.todoText = '';
                    };
             
                    todoList.remaining = function() {
                        var count = 0;
                        angular.forEach(todoList.todos, function(todo) {
                            count += todo.done ? 0 : 1;
                        });
                        return count;
                    };
             
                    todoList.archive = function() {
                        var oldTodos = todoList.todos;
                        todoList.todos = [];
                        angular.forEach(oldTodos, function(todo) {
                            if (!todo.done) todoList.todos.push(todo);
                        });
                    };
                });
        </script>
    </head>
    <body>
        <h2>Todo</h2>
        <div ng-controller="TodoListController as todoList">
            <span>{{todoList.todos.length}}個中、{{todoList.remaining()}}個のTODOが残っています。</span>
            [ <a href="" ng-click="todoList.archive()">アーカイブ</a> ]
            <ul class="unstyled">
                <li ng-repeat="todo in todoList.todos">
                    <input type="checkbox" ng-model="todo.done">
                    <span class="done-{{todo.done}}">{{todo.text}}</span>
                </li>
            </ul>
            <form ng-submit="todoList.addTodo()">
                <input type="text" ng-model="todoList.todoText" size="30" placeholder="新しいTODO">
                <input class="btn-primary" type="submit" value="追加">
            </form>
        </div>
    </body>
</html>