iT邦幫忙

DAY 2
5

AngularJS系列 第 2

使用 AngularJS 心得 Day 2 - 雙向繫結( ng-model, ng-bind )

今天稍微進階一點點,做個跟使用者互動的雙向繫結。並解將輸入的內容,顯示在畫面中。
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 ,這是因為一開始的 ab 並未設置初始值,所以是 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


上一篇
使用 AngularJS 心得 Day 1 - 繫結資料超方便
下一篇
使用 AngularJS 心得 Day 3 - 填表格( ng-repeat )
系列文
AngularJS4

1 則留言

0
hui_0369
iT邦新手 5 級 ‧ 2017-01-05 22:50:08

可以問一下,為什麼我的ng-model沒有作用嗎?是漏了什麼嗎?
http://ithelp.ithome.com.tw/upload/images/20170105/20103827QwKyvu5kSX.png
http://ithelp.ithome.com.tw/upload/images/20170105/20103827VIaDwkPY4M.png

葉宇霖 iT邦新手 4 級 ‧ 2017-01-06 01:03:10 檢舉

你參考這個 jsbin
因為我已經很久沒有寫 ng 也忘得差不多了 XD

hui_0369 iT邦新手 5 級 ‧ 2017-01-06 10:34:46 檢舉

哈哈好噢 感謝你~~/images/emoticon/emoticon41.gif

我要留言

立即登入留言