<p><!doctypehtml><htmlng-app>//添加对整个html的控制权<head><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>//加载angular<scriptsrc="todo.js"></script>//加载控制代码<linkrel="stylesheet"href="todo.css"></head><body><h2>Todo</h2><divng-controller="TodoCtrl">//用TodCtrl控制这个层里面的内容<span>{{remaining()}}of{{todos.length}}remaining</span>//remaining是返回的变量[<ahref=""ng-click="archive()">archive</a>]//单击的时候触发的方法<ulclass="unstyled"><ling-repeat="todointodos">//让li重复填充<inputtype="checkbox"ng-model="todo.done">//要控制的checkbox<spanclass="done-{{todo.done}}">{{todo.text}}</span>//todo.done是返回的变量</li></ul><formng-submit="addTodo()">//发送请求触发的方法<inputtype="text"ng-model="todoText"size="30"placeholder="addnewtodohere"><inputclass="btn-primary"type="submit"value="add"></form></div></body></html></p><p>todo.js部分代码</p><p>functionTodoCtrl($scope){//TodoCtrl方法$scope.todos=[//todos里面的元素值{text:'learnangular',done:true},{text:'buildanangularapp',done:false}];$scope.addTodo=function(){//添加方法$scope.todos.push({text:$scope.todoText,done:false});$scope.todoText='';};$scope.remaining=function(){//判断checkbox选中的个数varcount=0;angular.forEach($scope.todos,function(todo){count+=todo.done?0:1;});returncount;};$scope.archive=function(){varoldTodos=$scope.todos;$scope.todos=[];angular.forEach(oldTodos,function(todo){//循环判断执行if(!todo.done)$scope.todos.push(todo);});};}</p>
