Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js
Home  • Programming • Angular

Make a to do list using angularJS

todo list using angularjs
  1. <!doctype html>
  2. <html ng-app="todoApp">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>My Todo List</title>
  6. <style>
  7. .done-true {
  8. text-decoration: line-through;
  9. color: grey;
  10. }
  11. span{cursor:pointer}
  12.  
  13. </style>
  14. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  15.  
  16. <script>
  17. angular.module("todoApp",[]).controller("todoCont",function(){
  18. var root=this;
  19.  
  20. //array of object
  21. root.todo=[];
  22.  
  23. root.add=function(){
  24. //alert(root.txtTask);
  25. var json={'task':root.txtTask,'done':false};
  26.  
  27. root.todo.push(json);
  28.  
  29. };
  30.  
  31. root.remove = function() {
  32. var oldTodos = root.todo;
  33. root.todo = [];
  34. angular.forEach(oldTodos, function(todo) {
  35. if (!todo.done) root.todo.push(todo);
  36. });
  37. };
  38.  
  39. root.remaining = function() {
  40. var count = 0;
  41. angular.forEach(root.todo, function(item) {
  42. //count += item.done ? 0 : 1;
  43. if(!item.done){
  44. count +=1;
  45. }
  46. });
  47. return count;
  48. };
  49.  
  50. });
  51.  
  52. </script>
  53. </head>
  54.  
  55. <body>
  56.  
  57. <div ng-controller="todoCont as root">
  58. <span>{{root.remaining()}} of {{root.todo.length}} remaining</span>
  59. <a href="" ng-click="root.remove()">Remove</a>
  60.  
  61. <form ng-submit="root.add()">
  62. <input type="text" ng-model="root.txtTask" />
  63. <input type="submit" name="btnSubmit" value="Add" />
  64. </form>
  65. <div ng-repeat="item in root.todo">
  66. <input id="{{item.task}}" type="checkbox" ng-model="item.done"><label for="{{item.task}}"><span class="done-{{item.done}}">{{item.task}}</span></label>
  67. </div><!--end ng-repeat -->
  68.  
  69. </div><!--end controller-->
  70. </body>
  71. </html>

Comments 0


Copyright © 2025. Powered by Intellect Software Ltd