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