上圖是我們目前的進度，已完成了待辦事項的新增、刪除與狀態變更的功能。 CRUD （Create、Read、Update、Delete） 目前只剩下 U 還沒完成，所以我們得想個方式來讓使用者能夠更改他原本輸入的待辦事項名稱。

怎麼做才好呢？其實如果有操作原本 TodoMVC 的系統的話會發現，它是讓使用者在待辦事項清單裡讓使用者點擊兩下滑鼠後，開啟編輯模式而達到修改的目的；接著在 Blur （意即失去 focus 的當下） 或是按下 Enter 的時候修改資料；按下 Esc 的時候則會取消編輯模式。

但我們目前 Todo 的資料物件模型裡，沒有記錄編輯模式這件事，所以我們先在 todo.model.ts 的類別裡新增一個名為 editMode 的屬性：

/**
 * 是否處於編輯模式
 *
 * @private
 * @memberof Todo
 */
private editMode = false;

由於此屬性我將其宣告為私有，所以要再另外增加 setter 與 getter ：

/**
 * 取得此事項是否處於編輯模式
 *
 * @readonly
 * @type {boolean}
 * @memberof Todo
 */
get editing(): boolean {
  return this.editMode;
}

/**
 * 設定此事項是否可被編輯
 *
 * @memberof Todo
 */
set editable(bl: boolean) {
  this.editMode = bl;
}

之前有用過 get ，這次刻意多用了 set

接下來會需要更新待辦事項的名稱，所以我們需要再多一個 setTitle 的函式：

/**
* 設定事項名稱
*
* @param {string} title
* @memberof Todo
*/
setTitle(title: string): void {
  this.title = title;
}

到這邊算是已經完成了資料物件模型的調整，接下來換調整 todo-list.component.ts ：

/**
 * 開始編輯待辦事項
 *
 * @param {Todo} todo
 * @memberof TodoListComponent
 */
edit(todo: Todo): void {
  todo.editable = true;
}

/**
 * 更新待辦事項
 *
 * @param {Todo} todo - 原本的待辦事項
 * @param {string} newTitle - 新的事項名稱
 * @memberof TodoListComponent
 */
update(todo: Todo, newTitle: string): void {

  if (!todo.editing) {
    return;
  }

  const title = newTitle.trim();

  // 如果有輸入名稱則修改事項名稱
  if (title) {
    todo.setTitle(title);
    todo.editable = false;

  // 如果沒有名稱則刪除該項待辦事項
  } else {
    const index = this.getList().indexOf(todo);
    if (index !== -1) {
      this.remove(index);
    }
  }

}

/**
 * 取消編輯狀態
 *
 * @param {Todo} todo - 欲取消編輯狀態的待辦事項
 * @memberof TodoListComponent
 */
cancelEditing(todo: Todo): void {
  todo.editable = false;
}

最後則是要在 todo-list.component.html 裡加上新的 input 元素並綁定 blur 、 keyup.enter 、 keyup.escape 這三個事件的處理，以及 value 的屬綁定且加上 *ngIf 的 Directive ，令其在開啟編輯模式的時候才會出現，像是：

<input
  class="edit"
  #editedtodo
  *ngIf="todo.editing"
  [value]="todo.getTitle()"
  (blur)="update(todo, editedtodo.value)"
  (keyup.enter)="update(todo, editedtodo.value)"
  (keyup.escape)="cancelEditing(todo)"
>

有注意到 #editedtodo 這個奇怪的屬性嗎？這其實也是 Angular 的 Template 語法，意思有點等同我們在事件綁定時使用 $event.target ，用來取得該元素的實體。

接著在原本的 label 元素上，增加對 dblclick 事件的處理：

<label (dblclick)="edit(todo)">{{ todo.getTitle() }}</label>

最後要在編輯模式開啟時， li 的元素上要對應加上 editing 的類別名稱，所以這段的 HTML 大概會長的像這樣：

<li
  *ngFor="let todo of getList(); let i = index"
  [class.completed]="todo.done"
  [class.editing]="todo.editing"
>
  <div class="view">
    <input
      class="toggle"
      type="checkbox"
      (click)="todo.toggleCompletion()"
      [checked]="todo.done"
    >
    <label (dblclick)="edit(todo)">{{ todo.getTitle() }}</label>
    <button
      class="destroy"
      (click)="remove(i)"
    ></button>
  </div>
  <input
    class="edit"
    #editedtodo
    *ngIf="todo.editing"
    [value]="todo.getTitle()"
    (blur)="update(todo, editedtodo.value)"
    (keyup.enter)="update(todo, editedtodo.value)"
    (keyup.escape)="cancelEditing(todo)"
  >
</li>

做完了就來看看效果吧：

很好！所以我們目前已經把基本的 CRUD 都處理好了，接下來我們來處理這塊：

這塊的功能大致如下：

1. 顯示目前尚未完成的待辦事項數量
2. 當有已完成的待辦事項時，會出現一個按鈕用以清除已完成的待辦事項
3. 有個 Filter 可以切換顯示 所有/未完成/已完成 之待辦事項

我們先從最簡單的 1. 開始做好了。

打開 todo-list.service.ts ，我們要先能夠把尚未完成的待辦事項從清單裡面過濾出來：

/**
 * 取得已完成/未完成的清單
 *
 * @param {boolean} completed - 要取得已完成還是未完成的清單
 * @returns {Todo[]}
 * @memberof TodoListService
 */
getWithCompleted(completed: boolean): Todo[] {
  return this.list.filter(todo => todo.done === completed);
}

接著再到 todo-list.component.ts 來使用剛剛在 Service 裡新增的函式：

/**
 * 取得未完成的待辦事項清單
 *
 * @returns {Todo[]}
 * @memberof TodoListComponent
 */
getRemainingList(): Todo[] {
  return this.todoListService.getWithCompleted(false);
}

然後再開啟 todo-list.component.html 加上以下的程式碼：

<section class="todoapp">

  <header class="header">
    <!-- 省略 -->
  </header>
  
  <section 
    class="main" 
    *ngIf="getList().length"
  >
    <!-- 省略 -->
  </section>
  
  <footer 
    class="footer" 
    *ngIf="getList().length"
  >
      <span class="todo-count">
        <strong>{{ getRemainingList().length }}</strong> 
        {{ getRemainingList().length > 1 ? 'items' : 'item'}} left
      </span>
  </footer>
  
</section>

加完之後我們來看看效果：

再來是 3. ，因為之後要記錄使用者現在看的清單是哪一種，所以讓 CLI 幫我們建立一個列舉用以列舉出所有的狀態：

ng generate enum todo-list/todo-status-type

接著打開 todo-status-type.enum.ts 檔，我們來列舉一下之後會有的狀態類型：

/**
 * 待辦事項的狀態類型列舉
 *
 * @export
 * @enum {number}
 */
export enum TodoStatusType {

  /**
   * 所有
   */
  All,

  /**
   * 正在進行
   */
  Active,

  /**
   * 已完成
   */
  Completed

}

然後到 todo-list.component.ts 裡引入此列舉：

import { TodoStatusType } from './todo-status-type.enum';

再新增兩個屬性：

/**
 * 待辦事項狀態的列舉
 *
 * @memberof TodoListComponent
 */
todoStatusType = TodoStatusType;

/**
 * 目前狀態
 *
 * @private
 * @memberof TodoListComponent
 */
private status = TodoStatusType.All;

加上取得已完成清單、設定狀態、檢查狀態的函式：

/**
 * 取得已完成的待辦事項
 *
 * @returns {Todo[]}
 * @memberof TodoListComponent
 */
getCompletedList(): Todo[] {
  return this.todoListService.getWithCompleted(true);
}

/**
 * 設定狀態
 *
 * @param {number} status - 欲設定的狀態
 * @memberof TodoListComponent
 */
setStatus(status: number): void {
  this.status = status;
}

/**
 * 檢查目前狀態
 *
 * @param {number} status - 欲檢查的狀態
 * @returns {boolean}
 * @memberof TodoListComponent
 */
checkStatus(status: number): boolean {
  return this.status === status;
}

然後修改原本的 getList 函式：

/**
 * 取得待辦事項清單
 *
 * @returns {Todo[]}
 * @memberof TodoListComponent
 */
getList(): Todo[] {

  let list: Todo[] = [];

  switch (this.status) {

    case TodoStatusType.Active:
      list = this.getRemainingList();
      break;

    case TodoStatusType.Completed:
      list = this.getCompletedList();
      break;

    default:
      list = this.todoListService.getList();
      break;

  }

  return list;

}

最後再到 todo-list.component.html 加上：

<footer
  class="footer"
  *ngIf="getList().length"
>

  <span class="todo-count">
    <!-- 省略 -->
  </span>

  <ul class="filters">

    <li>
      <a
       href="javascript:;"
       [class.selected]="checkStatus(todoStatusType.All)"
       (click)="setStatus(todoStatusType.All)"
      >
        All
      </a>
    </li>

    <li>
      <a
        href="javascript:;"
        [class.selected]="checkStatus(todoStatusType.Active)"
        (click)="setStatus(todoStatusType.Active)"
      >
        Active
      </a>
    </li>

    <li>
      <a
        href="javascript:;"
        [class.selected]="checkStatus(todoStatusType.Completed)"
        (click)="setStatus(todoStatusType.Completed)"
      >
        Completed
      </a>
    </li>

  </ul>

</footer>

再來看看效果：

快完成了！！剩下最後一項，從清單中移除所有已完成的待辦事項。

打開 todo-list.service.ts 加上：

/**
 * 從清單中移除所有已完成之待辦事項
 *
 * @memberof TodoListService
 */
removeCompleted(): void {
  this.list = this.getWithCompleted(false);
}

然後再到 todo-list.component.ts 加上：

/**
 * 從清單中移除所有已完成之待辦事項
 *
 * @memberof TodoListComponent
 */
removeCompleted(): void {
  this.todoListService.removeCompleted();
}

最後則是到 todo-list.component.html 加上：

<footer
  class="footer"
  *ngIf="getList().length"
>

  <span class="todo-count">
    <!-- 省略 -->
  </span>

  <ul class="filters">
    <!-- 省略 -->
  </ul>
  
  <button
    class="clear-completed"
    *ngIf="getCompletedList().length"
    (click)="removeCompleted()"
  >
    Clear completed
  </button>

</footer>

好的！完成了！趕快來看一下效果：

最後最後，不曉得你們有沒有注意到在輸入框旁邊有一個小小的下箭頭，點擊那個箭頭可以一次將所有的待辦事項勾選為未完成或是已完成。

我們來完成這最後一個小功能吧！

首先先到 todo.model.ts 新增一個可以設定待辦事項完成與否的函式：

/**
 * 設定是否完成
 *
 * @param {boolean} completed
 * @memberof Todo
 */
setCompleted(completed: boolean): void {
  this.completed = completed;
}

然後再到 todo-list.component.ts 裡新增以下三個函式：

/**
 * 取得所有的待辦事項清單（不受狀態影響）
 *
 * @returns {Todo[]}
 * @memberof TodoListComponent
 */
getAllList(): Todo[] {
  return this.todoListService.getList();
}

/**
 * 所有的代辦事項是否都已完成
 *
 * @returns {boolean}
 * @memberof TodoListComponent
 */
allCompleted(): boolean {
  return this.getAllList().length === this.getCompletedList().length;
}

/**
 * 設定所有的待辦事項已完成/未完成
 *
 * @param {boolean} completed - 已完成/未完成
 * @memberof TodoListComponent
 */
setAllTo(completed: boolean): void {

  this.getAllList().forEach((todo) => {
    todo.setCompleted(completed);
  });

}

最後則是到 todo-list.component.html 稍微調整一下：

<section class="todoapp">

  <header class="header">
    <!-- 省略 -->
  </header>
  
  <section 
    class="main" 
    *ngIf="getAllList().length"
  >
    
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      *ngIf="getAllList().length"
      #toggleall
      [checked]="allCompleted()"
      (click)="setAllTo(toggleall.checked)"
    >
    <label for="toggle-all"></label>
    
    <!-- 省略 -->
  </section>
  
  <footer 
    class="footer" 
    *ngIf="getAllList().length"
  >
    <!-- 省略 -->
  </footer>
  
</section>

大功告成！！來看一下效果：

這次的小學堂總算做了一個相對來說較為完整的範例，各位都完成了嗎？

相關的程式碼我會放在我的 Github 上，如果有什麼問題都可以在底下留言噢！

那我們明天見囉！

錯誤更新記錄

• 2019/09/05 17:13 - 非常感謝邦友 jacky123200 的提醒，因按下 escape 會觸發 update 函式，補上判斷式以防止被更新。
• 2019/09/05 18:28 - 非常感謝邦友 jacky123200 的提醒，將 {{ getRemainingList().length ? 'item' : 'items'}} 修正成 {{ getRemainingList().length > 1 ? 'items' : 'item'}} 。
• 2019/10/15 19:41 - 非常感謝邦友 cuxy6705 的提醒，將 if (!this.editable) 修正為 if (!this.editing) 。