序言

本章节中主要介绍如何通过angular给我们的Todos应用开发对于添加与删除任务的新功能。

上个章节完成应用的截图

只有显示清单的Todo

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原型

点击X便可以删除当前的任务记录

修改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层只要对数据的变化做出对应的变化即可。