JavaScript強化教程——AngularJS 指令

本文爲 H5EDU 機構官方 HTML5培訓

AngularJS 通過被稱爲 指令 的新屬性來擴展 HTML。
AngularJS 通過內置的指令來爲應用添加功能。
AngularJS 允許你自定義指令。
AngularJS 指令
AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
完整的指令內容可以參閱 AngularJS 參考手冊。
AngularJS 實例
<div ng-app="" ng-init="firstName='John'">

 	<p>在輸入框中嘗試輸入:</p>
 	<p>姓名:<input type="text" ng-model="firstName"></p>
 	<p>你輸入的爲: {{ firstName }}</p>

</div>

 教程,主要介紹:JavaScript強化教程 —— AngularJS 指令

ng-app 指令告訴 AngularJS,<div> 元素是 AngularJS 應用程序 的"所有者"。
Note	一個網頁可以包含多個運行在不同元素中的 AngularJS 應用程序。
數據綁定
上面實例中的 {{ firstName }} 表達式是一個 AngularJS 數據綁定表達式。
AngularJS 中的數據綁定,同步了 AngularJS 表達式與 AngularJS 數據。
{{ firstName }} 是通過 ng-model="firstName" 進行同步。
在下一個實例中,兩個文本域是通過兩個 ng-model 指令同步的:
AngularJS 實例
<div ng-app="" ng-init="quantity=1;price=5">

<h2>價格計算器</h2>

數量: <input type="number"	ng-model="quantity">
價格: <input type="number" ng-model="price">

<p><b>總價:</b> {{ quantity * price }}</p>

</div>

點擊進入JavaScript強化教程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章