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.