AngularJS Todo list example

by yahyaKACEM

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<link rel="stylesheet" href="netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app ng-controller="TodoCtrl" class="container well">
    <h2>Total todos: {{getTotalTodos()}}</h2>
    <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 class="form-horizontal">
        <input type="text" ng-model="formTodoText" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i> Add</button>
    </form>

    <button class="btn-large" ng-click="clearCompleted()"><i class="icon-trash"></i> Clear Completed</button>
</div>

CSS

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

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [
        {text:'Learn AngularJS', done:false},
        {text:'Build an app', done:false}
    ];

    $scope.getTotalTodos = function () {
        return $scope.todos.length;
    };

    $scope.clearCompleted = function () {
        $scope.todos = _.filter($scope.todos, function(todo){
            return !todo.done;
        });
    };

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