ToDo AngularJS

This is a simple ToDo Application made using AngularJS.

by shivkumarganesh

HTML

<div ng-app="todoApp">
    <h2>Todo App</h2>
    <div ng-controller="TodoCtrl">
        <span>{{remaining()}} of {{todos.length}} Items remaining</span>
        [<a href="" ng-click="archive()">archive</a>]
        [<a href="" ng-click="archivedTodos">view archived</a>]
        <ul>
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done"/>
                <span class="done-{{todo.done}}">{{todo.text}}</span>
            </li>
        </ul>
        <h3>Archived Todos</h3>
        <ul>
            <li ng-repeat="todo in archivedTodos">
                {{todo.text}}</li><span>Unarchive</span>
        </ul>
        <form ng-submit="addTodos()">
            <input ng-model="todoText" type="text" size="30" placeholder="Add your text here"/>
            <input type="submit" value="add"/>
        </form>
    </div>
</div>

JavaScript

var myApp = angular.module("todoApp",[]);
myApp.controller("TodoCtrl",['$scope',function($scope){
    $scope.todos=[
        {text:'learn angular',done:true},
        {text:'try learning',done:false}
    ];
    $scope.archivedTodos = [];

    $scope.addTodos = function(){
        $scope.todos.push({text:$scope.todoText,done:false});
        $scope.todoText='';
    };
    
    $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;
        angular.forEach(oldTodos,function(todo){
            if(todo.done){
                $scope.archivedTodos.push(todo);
            }
        });
      $scope.todos = [];
        angular.forEach(oldTodos,function(todo){
            if(!todo.done){
                $scope.todos.push(todo);
            }
        });
    };
}]);