篩選我們的待辦事項項目

篩選項目的功能是建立於你先前加入在 app.component.ts 的 filter 屬性

filter: 'all' | 'active' | 'done' = 'all';

filter 屬性的預設值為 all，但是它也可以被設置為 active 或是 done。

在 app.component.html 新增下列 HTML 並且放在 Add 按鈕與項目表單之間。 在下列這個片段中，你的 HTML 中現有的部分是被註解起來的，這樣讓你可以更清楚地看到該把按鈕放在什麼位置。

<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
 -->

<!-- Buttons that show all, still to do, or done items on click -->
<div class="btn-wrapper">
  <button
    class="btn btn-menu"
    [class.active]="filter == 'all'"
    (click)="filter = 'all'">
    All
  </button>

  <button
    class="btn btn-menu"
    [class.active]="filter == 'active'"
    (click)="filter = 'active'">
    To Do
  </button>

  <button
    class="btn btn-menu"
    [class.active]="filter == 'done'"
    (click)="filter = 'done'">
    Done
  </button>
</div>

<!-- <h2>{{items.length}} item(s)</h2>
        <ul>... -->

點擊按鈕改變 filter 點擊按鈕改變 filter 的值，這將會決定哪些 項目 應該顯示，以及 Angular 套用於啟用狀態按鈕的樣式。

• 如果使用者點擊了 All 的按鈕，全部的項目都會顯示。
• 如果使用者點擊了 To do 的按鈕，只有 done 的值為 false 的項目會顯示。
• 如果使用者點擊了 Done 的按鈕，只有 done 的值為 true 的項目會顯示。

class 屬性可以用使用方括號 [] 來綁定，控制按鍵上的文字顏色， 當 filter 的值符合表達式的時候，類別綁定器 [class.active] 會套用 active class。 例如：當使用者點擊了 Done 按鈕，將會把 filter 的值設為 done ，這時候 filter == 'done' 這個表達式將會成立，也就是為邏輯真值 true。 當 filter 的值為 done ， Angular 就會套用 active class 到 Done 按鈕上，使得文字變為綠色。 而當使用者點擊了其他的按鈕，使得 filter 的值不再是 done 時，就不會再套用綠色在文字上了。

真是快！因為你已經有了 filter 的程式碼在 app.component.ts 中，你所需要做的就是編輯模板，以便於提供篩選項的控制項。我們的下一個，同時也是最後一個主題，探討了如何建立用於生產環境的 Angular 應用程式，並且提供了近一步的資源來帶領繼續你踏上學習之旅。

• 前頁
• 概述：理解 JavaScript 前端框架
• 次頁