今天稍微進階一點點，做個跟使用者互動的雙向繫結。並解將輸入的內容，顯示在畫面中。
input 用 ng-model 就對了

在前一個範例中，只是單單先將 data 寫死在 controller 中，根本還不算發揮 ng 的強大。接下來將應用表單中一定會用到的 input Tag 。

以下將做個簡單的輸出。
直接在 HTML 中這樣寫：

<input type="text" ng-model="a"> = {{a}}

Day 02 - 1

在輸入框中隨意地輸入幾個文字，就可以看到結果被輸出在後方。

一開始我被 ng 嚇到地方就是雙向綁定，也就是當我在 input 輸入任何值，我只要在 HTML 當中使用 {{}} 就可以輕易的將值列印出來，完全不需要寫入任何的邏輯，神奇。

接著來做個簡單的運算

將程式改寫成

<input type="text" ng-model="a"> * <input type="text" ng-model="b"> = {{a * b}}

Day 02 - 2

有注意到嗎？可在 {{}} 中，處理簡易的邏輯運算。

在一開始的時候，結果的欄位會出現 null ，這是因為一開始的 a 、 b 並未設置初始值，所以是 undefined 的情況下做運算，自然也就會出現 null 。要避免這個情況，一開始設置初始值即可。
在 controller 中輸入

$scope.a = 0;  
$scope.b = 0;

Day 02 - 3

（還記得 $scope 為 HTML 與 controller 的橋樑吧？要控制 HTML 中的變數，需在 controller 中先加上 $scope 才可以與之對應）

目前只能防止一開始的運算正確，當然還要排除使用者不是輸入數字的情況，這就在往後的範例中，再進行說明了。

不想看見醜醜的 {{}} ，來個 ng-bind ！

當我們的運算邏輯過於複雜，或是載入太多的 lib 都會導致 HTML 已經載入完畢，但是 JavaScript 尚未執行完成，這時候 {{}} 就會顯示在畫面上，不雅觀啊！

將原來的 HTML Code 改成如下

<input type="text" ng-model="a"> x <input type="text" ng-model="b"> = <span ng-bind="a * b"></span>

Day 02 - 4

就算 JavaScript 還沒處理完畢，我也不擔心。使用者會看到的就是很單純的 span Tag ，而不是醜醜的 {{}} 。

另外，和 {{}} 一樣，也可在 ng-bind 中，作簡易的邏輯運算

解析

*****如果只是單純的從 controller 輸出值至 HTML 中，可以有兩個方式

1. 在 HTML 中利用 {{}} 將 controller 的 $scope 的值輸出
2. 藉由 HTLM Tag 以及 ng-bind 的方式輸出

*****如果要讓使用者輸入，改變 controller 裡 $scope 的屬性，就必須藉由 ng-model 來改變值，此方式即為雙向 binding 。

此文同步更新於 EdenYeh's GitHub
歡迎各位多給我些指教，我會虛心學習的 =D

推薦好文提到：
Javascript中的邏輯運算子
用Javascript征服演算法 (序)
Day9 實做WinJS.UI.FlipView