<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='toDoList' ng-controller='toDoListCtrl'>
<!-- ng-controller is a brain of our application.
It will hold logics required by the application
-->
<!--ng-repeat will loop through the taskList -->
<div ng-repeat='task in taskList'>
<!-- A checkbox displaying the progress -->
<input type='checkbox' ng-model='task.done' />
<!-- An information of a task -->
<span ng-class='{done: task.done}'>{{task.task}}</span>
</div>
<div class='input-form'>
<input type='text' ng-model='newTask' />
<button ng-click='addTask(newTask)'>Add</button>
</div>
</body>
</html>
//We have to define our application first
angular.module("toDoList", [])
/*Controller is like a brain of our app. It contain models and logics required
to operate our to do list.
*/
.controller("toDoListCtrl", ['$scope',
function($scope) {
//A model holding tasks
$scope.taskList = [
{done: true,
task: 'Do nothing'
},
{
done: false,
task: 'Show some tasks'
},
{
done: false,
task: 'Add a task'
},
{
done: false,
task: 'Walk the dog'
}
];
//Function for adding task to the task list
$scope.addTask = function(task) {
//I'm pushing a new task to the task list
$scope.taskList.push({
done: false,
task: task
});
};
}
]);
body
{
background-color: #98CC4B;
}
.done
{
text-decoration: line-through;
}
.input-form
{
border-top: dashed 1px;
padding-top: 1em;
}
Simple to do list with Angularjs.