ToDos

by yoorek

HTML

<div ng-app>
<h2>Todo</h2>

<div ng-controller="TodoCtrl">
    <div ng-switch on="what()">
        <div ng-switch-when="list">
            <span>{{remaining()}} of {{todos.length}} remaining</span>
            [ <a href="" ng-click="archive()">archive</a> ]
            <ul class="unstyled">
                <li ng-repeat="todo in todos">
                    <input type="checkbox" ng-model="todo.done">
                    <img ng-src="http://placehold.it/{{todo.width}}x30'}}">
                    <span class="done-{{todo.done}}">{{todo.text}}</span>
                </li>
            </ul>
            <form ng-submit="addTodo()">
                <input type="text" ng-model="todoText.text" size="30" placeholder="add new todo here">
                <input class="btn-primary" type="submit" value="add">
            </form>
        </div>
        <div ng-switch-default>
            test
        </div>
    </div>
    {{todoText.text}}
</div>

CSS

.done-true {
    text-decoration: line-through;
    color: grey;
}
.test {
    background: #ccccff;
}

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [
        {text:'learn angular', done:true, width: 100},
        {text:'build an angular app', done:false, width: 150}
    ];
    
    $scope.todoText = {text: ''};
    
    $scope.what = function() {
        if ($scope.todos.length < 5) return "list";
        return "done";
    };

    $scope.addTodo = function() {
        $scope.todos.push({text:$scope.todoText.text, done:false, width: Math.floor(Math.random() * 100) + 50});
        $scope.todoText.text = '';
    };

    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };

    $scope.archive = function() {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
            if (!todo.done) $scope.todos.push(todo);
        });
    };
}