准备工作
参考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中删除末尾处
<script src="node_modules/todomvc-common/base.js"></script>及head中的<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
Angular 实现
模型准备
在项目文件夹中安装AngularJSnpm install angular --save
在index.html中引入AngularJS <script src="node_modules/angular/angular.js"></script>
在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
<body ng-app="MyTodoMvc">
<section class="todoapp" ng-controller="MainController">
将输入框绑定model<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
将li用ng-repeat来显示数据，将checkbox建立model，label用表达式来输出，edit时，model显示与label一致。当todo.completed为true时，ng-class为completed
<li ng-repeat="todo in todos" ng-class="{completed:todo.completed}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label>{{todo.text}}</label>
<button class="destroy"></button>
</div>
<input class="edit" ng-model="todo.text">
</li>
修改item总数<span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
实现添加功能
首先在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函数
<form ng-submit="add()">
<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
</form>
实现删除功能
添加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<button class="destroy" ng-click="remove(todo.id)"></button>
由于删除后再添加，上面将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 <button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">Clear completed</button>
双击编辑
当前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响应双击事件<label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
将input edit用form包起来实现回车触发save
<form ng-submit="save()">
<input class="edit" ng-model="todo.text" ng-blur="save()">
</form>
网友评论