Home • Programming • Angular Dec 5th, 2015 at 12:06 PM
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>
Make a to do list using angularJS

Comments 0

Share
