序言
本章節中主要介紹如何通過angular給我們的Todos應用開發編輯任務與完成任務的功能，學習ng-dblclick與ng-class指令的用法。
上個章節完成應用的截圖
1. 編輯任務項目功能
1.1 在Controller層編寫添加任務的方法邏輯
在使用中，我們總會對編寫的任務標題進行修改。我們預期的交互是用戶在雙擊任務條目的時候，任務條目則相應的變為一個可編輯的狀態。當我們再次按下回車提交內容時，對應的任務項目標題便會變為編輯后的狀態。
讓我們再梳理一下整個交互的順序：
- 點擊任務條目
- 變為可編輯狀態
- 修改后提交
- 任務條目清單更新
1.2 點擊任務顯示可編輯狀態
首先我們在每一個任務顯示區域后添加一個form用于對應的編輯表單。
//index.html
<li ng-repeat="task in vm.tasks">
<div class="view">
<label ng-dblclick="vm.editTask(task)">{{task.title}}</label>
<button class="destroy" ng-click="vm.removeTask(task)"></button>
</div>
<form>
<input class="edit" ng-trim="false" ng-model="task.title" >
</form>
</li>
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一致時，且切換樣式隱藏<div class="view">區域，顯示form區域。
//todomvc-app-css.css
#todo-list li.editing .view {
display: none;
}
我們修改index.html中的內容
<li ng-repeat="task in vm.tasks" ng-class="{editing: task === vm.editedTask}">
<div class="view">
<label ng-dblclick="vm.editTask(task)">{{task.title}}</label>
<button class="destroy" ng-click="vm.removeTask(task)"></button>
</div>
<form>
<input class="edit" ng-trim="false" ng-model="task.title" >
</form>
</li>
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的樣式，添加一條刪除線。
<li ng-repeat="task in vm.tasks"
ng-class="{completed: task.completed,
editing: task === vm.editedTask}">
最后，我們在每個前部最前部添加一個checkbox的選則框，當選中時候便將completed屬性變為true
<div class="view">
<input class="toggle" type="checkbox" ng-model="task.completed">
<label ng-dblclick="vm.editTask(task)">{{task.title}}</label>
<button class="destroy" ng-click="vm.removeTask(task)"></button>
</div>
修改完成后，刷新頁面，我們便可以點擊任務前部的原型選擇框用于來標記完成任務了。而在整個過程中，我們并沒有編寫一行js代碼，全部依靠angluar的指令來完成了這一系列的交互。
本章小結
至此我們基本完成了一個Todos應用的demo，整個demo包含了基本的增加、編輯、完成任務條目的功能。
在下面的幾個章節中我們還將繼續給整個Todos應用添加狀態過濾，歸檔完成任務以及本地存儲的功能。
