Make a to do list using angularJS
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8">
<title>My Todo List</title>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
span{cursor:pointer}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module("todoApp",[]).controller("todoCont",function(){
var root=this;
//array of object
root.todo=[];
root.add=function(){
//alert(root.txtTask);
var json={'task':root.txtTask,'done':false};
root.todo.push(json);
};
root.remove = function() {
var oldTodos = root.todo;
root.todo = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) root.todo.push(todo);
});
};
root.remaining = function() {
var count = 0;
angular.forEach(root.todo, function(item) {
//count += item.done ? 0 : 1;
if(!item.done){
count +=1;
}
});
return count;
};
});
</script>
</head>
<body>
<div ng-controller="todoCont as root">
<span>{{root.remaining()}} of {{root.todo.length}} remaining</span>
<a href="" ng-click="root.remove()">Remove</a>
<form ng-submit="root.add()">
<input type="text" ng-model="root.txtTask" />
<input type="submit" name="btnSubmit" value="Add" />
</form>
<div ng-repeat="item in root.todo">
<input id="{{item.task}}" type="checkbox" ng-model="item.done"><label for="{{item.task}}"><span class="done-{{item.done}}">{{item.task}}</span></label>
</div><!--end ng-repeat -->
</div><!--end controller-->
</body>
</html>
Comments 0