序言
本章节中主要介绍如何通过angular给我们的Todos应用开发对于添加与删除任务的新功能。
上个章节完成应用的截图
1. 添加任务条目
1.1 在Controller层编写添加任务的方法逻辑
即可以向TodoController中的tasks数组追加新的任务。
我们则在TodoController中编写一个addTask的方法
//Methods
vm.addTask = addTask;
////
function addTask(){
//新建一个Task的对象，将填写的任务标题赋值到title属性
var newTask = {
title: vm.newTask.trim(),
};
//判断标题是否为空
if(!newTask.title){
return;
}
//数组追加
vm.tasks.push(newTask);
vm.newTask = '';
}
addTask的方法中我们增加一个通过vm.newTask的变量将用户天填写的新任务标题信息转变为一个新的Task对象并追加到controller中的tasks数组进行显示。
1.2 在index.html中编写新任务的编写框
UI原型设计
我们将在之前完成的基础上在上方在添加一个form用于用户填写新任务的标题任务，并在按回车之后触发controller中的添加任务的方法。
\\index.html
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="vm.addTask()">
<input id="new-todo" placeholder="添加新的任务?" ng-model="vm.newTask" autofocus>
</form>
</header>
ng-submit
即表单提交的对应的触发事件。
<input id="new-todo" placeholder="添加新的任务?" ng-model="vm.newTask" autofocus>
ng-model
input的绑定指令，即input中的填写的内容会被绑定到目标的变量中，而这个变量又会同时绑定controller中对应的变量，无论哪一方发生了变化另一方都会同步的进行更新。
通过angular双向绑定的机制，我们在UI交互的编码中便可以从DOM的节点更新转移到了数据的变化更新上。大大降低了代码的编写与理解难度。
代码中input的ng-model绑定到了vm.newTask变量中，而在addTask()的方法中，我们便可以获取这个变量的值用于更新对应的任务清单。当tasks数组变化时，下方任务清单也会同步的发生变化，是不是很神奇呐！
1.3 添加效果
** 填写任务名称 **
** 点击回车，添加任务**
2. 删除任务
2.1 在Controller层编写删除指定任务的方法
我们需要编写一个方法，可以在tasks数组中删除指定的task记录。
//Method
vm.removeTask = removeTask;
////
function removeTask(task){
vm.tasks.splice(vm.tasks.indexOf(task), 1);
}
2.2 在index.html中在每个任务清单后增加删除按钮
UI原型
修改html模板代码
<section id="main" ng-cloak>
<ul id="todo-list">
<li ng-repeat="task in vm.tasks">
<div class="view">
<label>{{task.title}}</label>
<!--增加删除按钮-->
<button class="destroy" ng-click="vm.removeTask(task)"></button>
</div>
</li>
</ul>
</section>
ng-click 绑定了controller中的removeTask方法并将当前的task对象作为入参传入。则再点击X按钮后，便会执行controller的removeTask方法、将X所在行的任务从vm.tasks数组中删除。之后angular便会更新视图将被删除的task从任务清单中去除。
2.3 删除效果
章节小结
本章节中我们了解了如何在UI层通过ng-click等指令绑定controller中的方法去操作controller中的数据。在controller层中数据发生的变化又会同样作用与UI层的节点变化。
Angular的双向绑定机制简化了原先模式中大量操作DOM的代码，而是把精力放在了被绑定的数据，UI层只要对数据的变化做出对应的变化即可。
