AngularJS 表達(dá)式
AngularJS 使用 表達(dá)式 把數(shù)據(jù)綁定到 HTML。
AngularJS 表達(dá)式
AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi):{{ expression }}忆绰。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML与帆,這與 ng-bind 指令有異曲同工之妙国瓮。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)糕簿。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式:它們可以包含文字屈扎、運(yùn)算符和變量怀挠。
實(shí)例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 表達(dá)式 與 JavaScript 表達(dá)式
類似于 JavaScript 表達(dá)式析蝴,AngularJS 表達(dá)式可以包含字母,操作符绿淋,變量闷畸。
與 JavaScript 表達(dá)式不同,AngularJS 表達(dá)式可以寫在 HTML 中吞滞。
與 JavaScript 表達(dá)式不同佑菩,AngularJS 表達(dá)式不支持條件判斷,循環(huán)及異常裁赠。
與 JavaScript 表達(dá)式不同殿漠,AngularJS 表達(dá)式支持過濾器。
AngularJS 指令
AngularJS 通過被稱為 指令 的新屬性來擴(kuò)展 HTML佩捞。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能绞幌。
AngularJS 允許你自定義指令。
AngularJS 指令
AngularJS 指令是擴(kuò)展的 HTML 屬性一忱,帶有前綴 ng-莲蜘。
ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序谭确。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令把元素值(比如輸入域的值)綁定到應(yīng)用程序菇夸。
AngularJS 實(shí)例
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你輸入的為: {{ firstName }}</p>
</div>
ng-app 指令告訴 AngularJS琼富,<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。
一個(gè)網(wǎng)頁可以包含多個(gè)運(yùn)行在不同元素中的 AngularJS 應(yīng)用程序庄新。
數(shù)據(jù)綁定
上面實(shí)例中的 {{ firstName }} 表達(dá)式是一個(gè) AngularJS 數(shù)據(jù)綁定表達(dá)式鞠眉。
AngularJS 中的數(shù)據(jù)綁定,同步了 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)择诈。
{{ firstName }} 是通過 ng-model="firstName" 進(jìn)行同步械蹋。
在下一個(gè)實(shí)例中,兩個(gè)文本域是通過兩個(gè) ng-model 指令同步的:
AngularJS 實(shí)例
<div ng-app="" ng-init="quantity=1;price=5">
<h2>價(jià)格計(jì)算器</h2>
數(shù)量: <input type="number" ng-model="quantity">
價(jià)格: <input type="number" ng-model="price">
<p><b>總價(jià):</b> {{ quantity * price }}</p>
</div>
重復(fù) HTML 元素
ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素羞芍。
AngularJS 完美支持?jǐn)?shù)據(jù)庫的 CRUD(增加Create哗戈、讀取Read、更新Update荷科、刪除Delete)應(yīng)用程序唯咬。 把實(shí)例中的對(duì)象想象成數(shù)據(jù)庫中的記錄。
ng-app 指令
ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素畏浆。
ng-app 指令在網(wǎng)頁加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)(自動(dòng)初始化)應(yīng)用程序胆胰。
ng-init 指令
ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值。
通常情況下刻获,不使用 ng-init蜀涨。您將使用一個(gè)控制器或模塊來代替它。
ng-model 指令
ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)蝎毡。
ng-model 指令也可以:
- 為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證(number厚柳、email、required)沐兵。
- 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)(invalid别垮、dirty、touched扎谎、error)宰闰。
- 為 HTML 元素提供 CSS 類。
- 綁定 HTML 元素到 HTML 表單簿透。
ng-repeat 指令
ng-repeat 指令對(duì)于集合中(數(shù)組中)的每個(gè)項(xiàng)會(huì) 克隆一次 HTML 元素蛇损。