<!DOCTYPE HTML> <html lang="en-US" ng-app> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="lib/angular.js"></script> <script type="text/javascript"> function TodoCtrl($scope){ $scope.todos=[{text:"learn angular",done:true},{text:"build an angular app",done:false}]; $scope.addTodo=function(){ $scope.todos.push({text:$scope.todoText,done:false}); $scope.todoText=""; } $scope.remaining=function(){ var count=0; angular.forEach($scope.todos,function(todo){ count+=todo.done ? 0 : 1; }); return count; } $scope.archive=function(){ var oldTodos=$scope.todos; $scope.todos=[]; angular.forEach(oldTodos,function(todo){ if (!todo.done) { $scope.todos.push(todo); } }) } } </script> <style type="text/css"> .done-true{ text-decoration: line-through; color:grey; } </style> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <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 ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn btn-primary" type="submit" value="add"> </form> </div> </body> </html>