todoapp.controller('maincontroller' // 这里的$scope也就起到了容器的作用，声明了变量的可见范围。 ,['$scope',function($scope){ // $scope 作用就是往视图中添加元素 // 文本框中的数值 $scope.text = ''; // 会使用双向绑定的数据类型 // 为方便页面展示，手动添加一串列表 $scope.todolist = [{ text:'Angularjs', done:false },{ text:'Bootstrap', done:false }]; }]);
完善功能函数
// 添加函数，响应交互 $scope.add = function(){ var text = $scope.text.trim(); if(text) { $scope.todolist.push({ text:text, done:false }); $scope.text = ''; } } // 点击删除按钮的响应事件 $scope.delete = function(todo){ var index = $scope.todolist.indexOf(todo) $scope.todolist.splice(index,1);// 起删除的作用 } // 获取已完成的事件的个数，按照checkbox的选择与否实现 // 由于页面是动态变化的，所以要使用函数，或者干脆使用模型绑定，但是那样的话会稍微麻烦一点 $scope.doneCount = function(){ // 使用filter来实现 var temp = $scope.todolist.filter(function(item){ return item.done;// 返回true表示当前的数据满足条件，事件已完成 }); return temp.length; }
总结
代码不多，思想很深邃。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：