使用Angular编写TodoMVC Vol 3

序言

本章节中主要介绍如何通过angular给我们的Todos应用开发编辑任务与完成任务的功能，学习ng-dblclick与ng-class指令的用法。

上个章节完成应用的截图

删除前

1. 编辑任务项目功能

1.1 在Controller层编写添加任务的方法逻辑

在使用中，我们总会对编写的任务标题进行修改。我们预期的交互是用户在双击任务条目的时候，任务条目则相应的变为一个可编辑的状态。当我们再次按下回车提交内容时，对应的任务项目标题便会变为编辑后的状态。
让我们再梳理一下整个交互的顺序：

1. 点击任务条目
2. 变为可编辑状态
3. 修改后提交
4. 任务条目清单更新

1.2 点击任务显示可编辑状态

首先我们在每一个任务显示区域后添加一个form用于对应的编辑表单。

//index.html

    

        {{task.title}}
        
    
    

        
    

ng-dblclick指令:在目标标签上绑定一个鼠标双击事件,与ng-click事件基本是一样的

然后我们在每个li标签中绑定了一个单击事件用于告知angular当前哪个任务条目被点击了，需要处于显示状态。被点击的任务会被赋值到vm.editedTask中。

//todo.controller.js
vm.editTask = editTask;
function editTask(task){
  vm.editedTask = task;
}

最后，我们再通过ng-class标签用于切换任务条目的显示模式：当当前的li标签对应的task与vm.editedTask一致时，且切换样式隐藏

区域，显示form区域。

//todomvc-app-css.css
#todo-list li.editing .view {
   display: none;
}

我们修改index.html中的内容

    

        {{task.title}}
        
    
    

        
    

ng-class指令:即在不同的判断条件下对目标标签中的class属性做出变化与响应。稳重的ng-class="{editing: task===vm.editedTask}"则表示当task与vm.editedTask完全相等时，则li上的class值变为editing。如当有多个条件与目标值存在时，则使用ng-class={value1:condition1,value2:conditon2,... }规格的表达式。

进入可编辑状态的任务条目

我们可以双击任务条目变为可编辑状态并且，只要做出任务改动都会立即用于任务标题上。

1.3 完成状态

当我们完成一个任务时候，我们可以进行标记，删除线或者直接从待版清单中删除，在这个时候我们先回顾一下现在task的数据结构：

{
  title:"string"
}

我们现在希望task不仅有标题还希望有一个状态来标识其现在是待办还是已完成的情况。故我们队task的数据结构做出一点调整，增加一个completed的属性表示任务是否已经完成。

{
   title:"string",
  completed:false
}

调整index.html，当task.completed字段为true时增加一个compeleted的样式，添加一条删除线。

最后，我们在每个前部最前部添加一个checkbox的选则框，当选中时候便将completed属性变为true

    
    {{task.title}}
    

修改完成后，刷新页面，我们便可以点击任务前部的原型选择框用于来标记完成任务了。而在整个过程中，我们并没有编写一行js代码，全部依靠angluar的指令来完成了这一系列的交互。

完成第二个任务

本章小结

至此我们基本完成了一个Todos应用的demo，整个demo包含了基本的增加、编辑、完成任务条目的功能。
在下面的几个章节中我们还将继续给整个Todos应用添加状态过滤，归档完成任务以及本地存储的功能。