html
<!doctype html> <html ng-app> <head> <link rel="stylesheet" href="todo.css" /> <link rel="stylesheet" href="bootstrap.min.css" /> <script src="./angular-1.0.1.min.js"></script> <script src="./todo.js"></script> </head> <body> <div ng-controller="TodoCtrl"> <h2>Total todos:{{getTotalTodos()}} </h2> <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"/> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form class="form-horizontal"> <input type="text" ng-model="formTodoText" ng-model-instant /> <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add </button> </form> </div> </body> </html>
css
1 .done-true{ 2 text-decoration: line-through; 3 color: gray; 4 }
js
1 function TodoCtrl($scope){ 2 $scope.totalTodos=4; 3 4 $scope.todos=[ 5 {text:"Learn AngularJS",done:false}, 6 {text:"Build an app",done:false} 7 ]; 8 9 $scope.getTotalTodos=function(){ 10 return $scope.todos.length; 11 }; 12 13 14 $scope.addTodo=function(){ 15 $scope.todos.push({text:$scope.formTodoText,done:false}); 16 $scope.formTodoText=""; 17 }; 18 }