准备工作
参考http://todomvc.com/
todomvc-app-template下载：在相应的位置使用git复制项目git clone https://github.com/tastejs/todomvc-app-template.git
下载完后，在项目文件夹内npm install下载包
安装好后，可以进行预览。但是控制台有找不到文件的错误
learn.json用于展现官方的说明栏，使用
npm uninstall todomvc-common --save来卸载
在index.html中删除末尾处
Angular 实现
模型准备
在项目文件夹中安装AngularJSnpm install angular --save
在index.html中引入AngularJS
在js/app.js中编写代码。默认传入的window对象用不到，改成angular对象。默认使用严格校验模式。
初始化，建立模块与控制器，并初始化文本列表的Model
(function (angular) {
'use strict';
//应用程序的主要的模块
var myApp = angular.module('MyTodoMvc', []);
// 注册一个主要的控制器
myApp.controller('MainController', ['$scope', function($scope) {
// 文本框需要一个模型
$scope.text = '';
// 任务列表也需要一个
// 每一个任务的结构 { id: 1, text: '学习', completed: true }
$scope.todos = [{ id: 1, text: '学习', completed: false},
{ id: 2, text: '睡觉', completed: false },
{ id: 3, text: '打豆豆', completed: true }, ];
}]
)
})(angular);
将模块与控制器引入到index.html
将输入框绑定model
将li用ng-repeat来显示数据，将checkbox建立model，label用表达式来输出，edit时，model显示与label一致。当todo.completed为true时，ng-class为completed
修改item总数{{todos.length}} item left
实现添加功能
首先在controller加上add函数，add功能todos数组中添加1项，ID用数组长度+1，$scope.todos.length + 1，text为输入的text模型的值，添加后，将text清空
$scope.add = function() {
$scope.todos.push({
// 自动增长
id: $scope.todos.length + 1,
// 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入
text: $scope.text,
completed: false
});
// 添加后，清空文本框
$scope.text = '';
};
将input放到form中，回车后进行表单提交，通过ng-submit实现add函数
实现删除功能
添加remove功能，遍历数组找到id，通过splice删除（从第i位起，删除1位）
$scope.remove = function(id) {
// 删除谁
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].id === id) {
$scope.todos.splice(i, 1);
break;
}
}
};
在htmel中添加ng-click指向remove
由于删除后再添加，上面将id设成数组长度的方法会导致id重复，我们可以用随机数来解决,将add方法中id更新成id: Math.random(),，也可以添加个getid的方法，迭代获取
function getId() {
var id = Math.random(); // 1 2
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].id === id) {
id = getId();
break;
}
}
return id;
}
清空功能
建立一个新数值，将没有completed的项放到这个数组中，然后将todos 数组指向这个新数组，就实现了clear completed功能。并实现检查是否有完成项的功能
$scope.clear = function() {
var result = [];
for (var i = 0; i < $scope.todos.length; i++) {
if (!$scope.todos[i].completed) {
result.push($scope.todos[i]);
}
}
$scope.todos = result;
};
// 是否有已经完成的
$scope.existCompleted = function() {
// 该函数一定要有返回值
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].completed) {
return true;
}
}
return false;
};
在button中引入这两个function
双击编辑
当前currentEditingId初始值设为-1，即一个不可能存在的id，当编辑时，将其设为当前行的id，save方法停止编辑，将currentEditingId设为-1
// 当前编辑哪个元素
$scope.currentEditingId = -1;
$scope.editing = function(id) {
$scope.currentEditingId = id;
};
$scope.save = function() {
$scope.currentEditingId = -1;
};
再li的ng-class中加上editing:todo.id===currentEditingId
使得text响应双击事件
将input edit用form包起来实现回车触发save