File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 162162
163163當使用者按住某個鍵不放的時候，為了避免重複執行 ` calc() ` ，` ng-model-options ` 會限制更新速率至每 200 毫秒一次。
164164
165- 輸入框的 ` id ` 屬性與座標相同，由 ` col+row ` 安插取得。一個 HTML 元件的 ` id ` 屬性，必須跟文件內所有其他元件的 ` id ` 不同。這樣確保了 ` #A1 ` 這個「ID 選擇器」（ID selector）只會指向至一個元素，而不像類別選擇器 ` .formula ` 那樣指稱一系列的元素。當使用者按下** 上鍵** /** 下鍵** /** 輸入鍵** 時，` keydown() ` 中的邏輯就會使用 ID 選擇器，來確定該設定焦點在哪個輸入框上。
165+ 輸入框的 ` id ` 屬性與座標相同，由 ` col+row ` 安插取得。每個 HTML 元素的 ` id ` 屬性，必須跟文件內所有其他元素的 ` id ` 不同。這樣確保了 ` #A1 ` 這個「ID 選擇器」（ID selector）只會指向至一個元素，而不像類別選擇器 ` .formula ` 那樣指稱一系列的元素。當使用者按下** 上鍵** /** 下鍵** /** 輸入鍵** 時，` keydown() ` 中的邏輯就會使用 ID 選擇器，來確定該設定焦點在哪個輸入框上。
166166
167167在輸入框後面，我們放置一個 ` <div> ` 元素，來顯示當前儲存格的計算結果（以物件 ` errs ` 和 ` vals ` 在 JS 模型中表示）：
168168
171171 {{ errs[col+row] || vals[col+row] }}</div >
172172```
173173
174- 如果計算公式發生錯誤，文字插值會使用 ` errs[col+row] ` 裡存放的錯誤訊息，而 ` ng-class ` 會套用 ` error ` 類別至該元件 ，為它套用特定的 CSS 樣式（使用紅色文字、置中對齊等等）。
174+ 如果計算公式發生錯誤，文字插值會使用 ` errs[col+row] ` 裡存放的錯誤訊息，而 ` ng-class ` 會套用 ` error ` 類別至該元素 ，為它套用特定的 CSS 樣式（使用紅色文字、置中對齊等等）。
175175
176176如果沒有錯誤，進行安插的會是 ` || ` 右側的 ` vals[col+row] ` 。如果它是一個非空白的字符串，初始字符（` [0] ` ）就會運算為真，使得 ` text ` 類別套用到元素上，使文字向左對齊。
177177
187187
188188### JS: 主要控制層
189189
190- ` main.js ` 的唯一作用，是定義 ` <body> ` 元件所需的 ` Spreadsheet ` 控制函式，其中利用 AngularJS 提供的 ` $scope ` 參數來定義 JS 模型：
190+ ` main.js ` 的唯一作用，是定義 ` <body> ` 元素所需的 ` Spreadsheet ` 控制函式，其中利用 AngularJS 提供的 ` $scope ` 參數來定義 JS 模型：
191191
192192``` js
193193function Spreadsheet ($scope , $timeout ) {
@@ -249,7 +249,7 @@ function Spreadsheet ($scope, $timeout) {
249249 } };
250250` ` `
251251
252- 之所以要檢查 ` querySelector` ** A1 ** 向上移動時，會產生選擇器 ` #A0` 它沒有相應的元件 ，因此不會觸發焦點變化。在最底端的橫列按** 下鍵** 時也是一樣。
252+ 之所以要檢查 ` querySelector` ** A1 ** 向上移動時，會產生選擇器 ` #A0` 它沒有相應的元素 ，因此不會觸發焦點變化。在最底端的橫列按** 下鍵** 時也是一樣。
253253
254254接著我們定義 ` reset()` ` ↻` ` sheet`
255255
You can’t perform that action at this time.
0 commit comments