Add /learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering, zh-TW (#757)

Co-authored-by: huskylin <hank84112092@google.com>

1 files changed, 20 insertions, 20 deletions

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:
 
 <div>{{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")}}</div>
 
-<p>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.</p>
+<p>現在讓我們來增加功能，讓使用者篩選待辦事項，這樣他們就可以選擇查看進行中、已完成，或是全部的事項。</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
    <th scope="row">預備知識：</th>
-   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.
+   <td>熟悉基礎的 <a href="/zh-TW/docs/Learn/HTML">HTML</a> ， <a href="/zh-TW/docs/Learn/CSS">CSS</a> 與 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 語言，以及<a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列</a>的知識。
    </td>
   </tr>
   <tr>
    <th scope="row">學習目標：</th>
-   <td>To add filtering functionality to our app.</td>
+   <td>替我們的應用程式增加篩選功能。</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="our_filtering_code">Our filtering code</h2>
+<h2 id="our_filtering_code">我們的篩選功能程式碼</h2>
 
-<p>Filtering items builds on the <code>filter</code> property, which you previously added to <code>app.component.ts</code>:</p>
+<p>篩選項目的功能是建立於你先前加入在 <code>app.component.ts</code> 的 <code>filter</code> 屬性</p>
 
 <pre class="brush: js">filter: 'all' | 'active' | 'done' = 'all';</pre>
 
-<p>The default value for filter is <code>all</code>, but it can also be <code>active</code> or <code>done</code>.</p>
+<p>filter 屬性的預設值為 <code>all</code>，但是它也可以被設置為 <code>active</code> 或是 <code>done</code>。</p>
 
-<h2 id="adding_filter_controls">Adding filter controls</h2>
+<h2 id="adding_filter_controls">增加篩選的控制項</h2>
 
-<p>In <code>app.component.html</code>, add the following HTML before the <strong>Add</strong> 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.</p>
+<p>在 <code>app.component.html</code> 新增下列 HTML 並且放在 <strong>Add</strong> 按鈕與項目表單之間。
+  在下列這個片段中，你的 HTML 中現有的部分是被註解起來的，這樣讓你可以更清楚地看到該把按鈕放在什麼位置。</p>
 
 <pre class="brush: html">&lt;!-- &lt;button class="btn-primary" (click)="addItem(newItem.value)"&gt;Add&lt;/button&gt;
  --&gt;
@@ -79,23 +79,23 @@ In the following snippet, the existing sections in your HTML are in comments so
   &lt;!-- &lt;h2&gt;\{{items.length}} item(s)&lt;/h2&gt;
         &lt;ul&gt;... --&gt;</pre>
 
-<p>Clicking the buttons changes the <code>filter</code> values, which determines the <code>items</code> that show as well as the styles that Angular applies to the active button.</p>
+<p>點擊按鈕改變 <code>filter</code> 點擊按鈕改變 filter 的值，這將會決定哪些 <code>項目</code> 應該顯示，以及 Angular 套用於啟用狀態按鈕的樣式。</p>
 
 <ul>
-  <li>If the user clicks the <strong>All</strong> button, all of the items show.</li>
-  <li>If the user clicks the <strong>To do</strong> button, only the items with a <code>done</code> value of <code>false</code> show.</li>
-  <li>If the user clicks the <strong>Done</strong> button, only the items with a <code>done</code> value of <code>true</code> show.</li>
+  <li>如果使用者點擊了 <strong>All</strong> 的按鈕，全部的項目都會顯示。</li>
+  <li>如果使用者點擊了 <strong>To do</strong> 的按鈕，只有 <code>done</code> 的值為 <code>false</code> 的項目會顯示。</li>
+  <li>如果使用者點擊了 <strong>Done</strong> 的按鈕，只有 <code>done</code> 的值為 <code>true</code> 的項目會顯示。</li>
 </ul>
 
-<p>A class attribute binding, using square brackets, <code>[]</code>, controls the text color of the buttons.
-The class binding, <code>[class.active]</code>, applies the <code>active</code> class when the value of <code>filter</code> matches the expression.
-For example, when the user clicks the <strong>Done</strong> button, which sets the <code>filter</code> value to <code>done</code>, the class binding expression of <code>filter == &#39;done&#39;</code> evaluates to <code>true</code>.
-When the <code>filter</code> value is <code>done</code>, Angular applies the <code>active</code> class to the <strong>Done</strong> button to make the text color green.
-As soon as the user clicks on one of the other buttons, the value a <code>filter</code> is no longer <code>done</code>, so the green text color no longer applies.</p>
+<p>class 屬性可以用使用方括號 <code>[]</code> 來綁定，控制按鍵上的文字顏色，
+當 <code>filter</code> 的值符合表達式的時候，類別綁定器 <code>[class.active]</code> 會套用 <code>active</code> class。
+例如：當使用者點擊了 <strong>Done</strong> 按鈕，將會把 <code>filter</code> 的值設為 <code>done</code> ，這時候 <code>filter == &#39;done&#39;</code> 這個表達式將會成立，也就是為邏輯真值 <code>true</code>。
+當 <code>filter</code> 的值為 <code>done</code> ， Angular 就會套用 <code>active</code> class 到 <strong>Done</strong> 按鈕上，使得文字變為綠色。
+而當使用者點擊了其他的按鈕，使得 <code>filter</code> 的值不再是 <code>done</code> 時，就不會再套用綠色在文字上了。</p>
 
-<h2 id="summary">Summary</h2>
+<h2 id="summary">結語</h2>
 
-<p>That was quick! Since you already had the <code>filter</code> code in <code>app.component.ts</code>, 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.</p>
+<p>真是快！因為你已經有了 <code>filter</code> 的程式碼在 <code>app.component.ts</code> 中，你所需要做的就是編輯模板，以便於提供篩選項的控制項。我們的下一個，同時也是最後一個主題，探討了如何建立用於生產環境的 Angular 應用程式，並且提供了近一步的資源來帶領繼續你踏上學習之旅。</p>
 
 <div>{{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")}}</div>