AngularJS Example

Todo list app

by Preston Badeer

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
     <h2>Todo</h2>

    <div ng-controller="TodoCtrl"> <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" /> <span class="done-{{todo.done}}">{{todo.text}}</span>

            </li>
        </ul>
        <form ng-submit="addTodo()">
            <div class="input-append">
                <input class="span2" id="appendedInputButton" type="text" placeholder="add new todo here" ng-model="todoText"/>
                <button class="btn" type="submit">Add</button>
            </div>
        </form>
    </div>
</div>

CSS

.done-true {
    text-decoration: line-through;
    color: grey;
}

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [{
        text: 'learn angular',
        done: true
    }, {
        text: 'build an angular app',
        done: false
    }];

    $scope.addTodo = function () {
        $scope.todos.push({
            text: $scope.todoText,
            done: false
        });
        $scope.todoText = '';
    };

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

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