Simple Todo List with AngularJS > 1.3

Lets create a simple Todo list using AngularJS > 1.3. Nothing to say, the codes tells a lot. Lets write the code:

Step 01: Create a JS file called app.js and put the following code:

'use strict';

var todoAppliction = angular.module("todoApp",[]);

todoAppliction.controller("todoController", todoController);
todoController.inject =['scope'];

/**
 * Processs an input box enter event
 * Ex: on enter add the task in the list
 */
todoAppliction.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                scope.apply(function(){
                    scope.eval(attrs.ngEnter, {'event': event});
                });

                event.preventDefault();
            }
        });
    };
});


/**
 * Manage todolist functionality
 */
function todoController(scope){scope.todoList = [];
    scope.isValid = true;scope.totalCompleted = 0;
    scope.totalInCompleted = 0;scope.filterBy = 'all';
    
    
    scope.addTodoItem = addTodoItem;scope.removeTodoItem = removeTodoItem;
    scope.getStatus =  getStatus;
    
    
    function addTodoItem(){scope.isValid = isValid();
        if(!scope.isValid) {
            return false;
        }scope.todoList.push({
        	id: 'id_' + (new Date()).getTime(),
            name: scope.task_title, 
            completed: false, 
            createdDate: (new Date())
        });scope.task_title = '';
    }
    
    function removeTodoItem(index) {
    	scope.todoList.splice(index,1);
    }
    
    function isValid() {
    	return (scope.task_title != null && scope.task_title != undefined &&scope.task_title != "")
    }
    
    function getStatus(isComplete){
        var count = 0;
    	angular.forEach($scope.todoList, function(item){
			if (isComplete && item.completed) {
                count++;
            }else if (!isComplete && !item.completed) {
                count++;
            }
        })
        return count;
    }

}

Step 02: Create the template index.html and put the following code inside it:

<body>
    <div ng-app="todoApp" ng-controller="todoController">
        <div class="task-input">
            <input type="text" ng-enter="addTodoItem()" id="task-input-box" placeholder="enter task title" ng-model="task_title"/>
            <button type="button" name="add-task" id="add-task" class="button" ng-click="addTodoItem()">
                + Add 
            </button>
            <br/>
            <div class="error-mg" ng-show="!isValid">Please enter a title</div>
            
            <div id="filterOptions">

                <input type='radio' ng-model="filterBy" value="all"/> All ({{todoList.length}})
                    <input type='radio' ng-model="filterBy" value="complete"/> Complete ({{getStatus(true)}})
                        <input type='radio' ng-model="filterBy" value="incomplete"/> Incomplete ({{getStatus(false)}})
                    
            </div>
        </div>


        <div class="todo-list">
            <ul>
                <li ng-repeat="todo in todoList track by todo.id"
                    ng-show="(filterBy=='all') || (filterBy=='incomplete' && !todo.completed) || (filterBy=='complete' && todo.completed)"
                > 
                    <input type="checkbox" ng-model="todo.completed"/>
                    <span ng-class="todo.completed ? 'complete': 'incomplete'">{{todo.name}} </span>
                    <a href="#" ng-click="removeTodoItem($index)">remove</a>
                </li>
            </ul>
        </div> 
    
    </div>
</body>

Step 03: Style it with CSS in style.css

.task-input{
    padding: 10px;
    background-color: #4072B4;
    color:white;
    font-family:verdana;
    font-size: 12px;
}

.task-input input[type=text]{
    border: 1px solid white;
    padding: 10px;
    font-size: 15px;
    border-radius: 3px;
    width: 280px;
}

.button{
    padding: 11px 15px;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid white;
    background-color: #3267C6;
    color:white;
}

.error-mg{
    color:red;
    font-size:12px;
    text-align:left;
}

.complete{
    text-decoration:line-through;
    color:#999;
}

.todo-list{
    margin: 15px 0px;
}

.todo-list ul{
    padding:0;
    margin:0;
}

.todo-list ul li{
    list-style:none;
    padding: 0;
}

.todo-list ul li span{
    width: 320px;
    display:inline-block;
    vertical-align:top;
}

#filterOptions{
    margin: 10px 0px;
}

That’s it. Enjoy and play with Todo list

Next: we will store the list in MongoDB and Categories Todo Item.

Leave a Comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.