-
<!doctype html> <html ng-app> <head> <script src="js/angular1.2.0.js"></script> <script src="js/todo.js"></script> <link rel="stylesheet" href="css/todo.css"/> </head> <body> <h2>Todo</h2> <!-- ng-controller 对应的是后台的一个同名js函数--> <div ng-controller="TodoCtrl"> <!-- remaining 对应的是后台 controller 里的一个同名js函数； todos 对应的是后台 controller里的一个同名的js数组--> <span>{{remaining()}} of {{todos.length}} remaining</span> [<a href="" ng-click="archive()">archive</a>] <ul class="unstyled"> <!-- ng-repeat 用来说明循环遍历js数组，todo是新定义的遍历游标 --> <li ng-repeat="todo in todos"> <!-- ng-model 用来双向绑定 json 里的 done 键对应的值 --> <input type="checkbox" ng-model="todo.done"/> <!-- {{}} 只读绑定 --> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <!-- ng-submit 用来绑定后台 controller 里的js函数 --> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"/> <input class="btn-primary" type="submit" value="add"/> </form> </div> </body> </html> -
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); }); }; }