2014年7月24日 星期四

AngularJS:ng-model、ng-init


前面介紹過AngularJS Expression的表達方式,而使用ng-model標籤可以使控制項搭配Expression進行即時檢視。
數量:
價格:
總計:

{{ quantity * price }}


一、首先設計出兩個"文字輸入方塊"讓使用者輸入價格、數量,然而透過表達式顯示出總計,所以先在兩個輸入方塊中加入ng-model標籤,並指定屬性值為quantity、price再者我們希望一開始就給訂初始值故在加入ng-init來指定初值。
數量: <input ng-init="quantity = 1" ng-model="quantity" type="number" />
<br />
價格: <input ng-init="price = 500" ng-model="price" type="number" />
<br />
二、接著再h1中加入Expression來顯現總價。
總計: <br />
<h1 style="color: green;">
{{ quantity * price }}</h1>
三、完整程式碼:http://jsbin.com/zecev/1/edit

沒有留言:

張貼留言