From 3c4163ab6ce492ca6464826ce0db07a41fd35440 Mon Sep 17 00:00:00 2001 From: huskylin Date: Wed, 5 May 2021 12:50:50 +0800 Subject: Add /learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering, zh-TW (#757) Co-authored-by: huskylin --- .../angular_filtering/index.html | 40 +++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'files/zh-tw/learn') diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html index bfc15c91b1..f05c2490fd 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering/index.html @@ -20,34 +20,34 @@ tags:
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
-

Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.

+

現在讓我們來增加功能，讓使用者篩選待辦事項，這樣他們就可以選擇查看進行中、已完成，或是全部的事項。

- - +
預備知識：Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. + 熟悉基礎的 HTML ， CSS 與 JavaScript 語言，以及終端機/命令列的知識。
學習目標：To add filtering functionality to our app.替我們的應用程式增加篩選功能。
-

Our filtering code

+

我們的篩選功能程式碼

-

Filtering items builds on the filter property, which you previously added to app.component.ts:

+

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

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

The default value for filter is all, but it can also be active or done.

+

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

-

Adding filter controls

+

增加篩選的控制項

-

In app.component.html, add the following HTML before the Add button but above the section that lists the items. -In the following snippet, the existing sections in your HTML are in comments so you can see exactly where to put the buttons.

+

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

<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
  -->
@@ -79,23 +79,23 @@ In the following snippet, the existing sections in your HTML are in comments so
   <!-- <h2>\{{items.length}} item(s)</h2>
         <ul>... -->
-

Clicking the buttons changes the filter values, which determines the items that show as well as the styles that Angular applies to the active button.

+

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

-

A class attribute binding, using square brackets, [], controls the text color of the buttons. -The class binding, [class.active], applies the active class when the value of filter matches the expression. -For example, when the user clicks the Done button, which sets the filter value to done, the class binding expression of filter == 'done' evaluates to true. -When the filter value is done, Angular applies the active class to the Done button to make the text color green. -As soon as the user clicks on one of the other buttons, the value a filter is no longer done, so the green text color no longer applies.

+

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

-

Summary

+

結語

-

That was quick! Since you already had the filter code in app.component.ts, all you had to do was edit the template in order to provide controls for filtering the items. Our next — and last — article looks at how to build your Angular app ready for production, and provides further resources to carry on your learning journey.

+

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

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
-- cgit v1.2.3-54-g00ecf