AngularJS通過(guò)指令將HTML屬性進(jìn)行了擴(kuò)展。

---

AngularJS指令

　　AngularJS指令是帶有ng-前綴的擴(kuò)展HTML屬性。

　　ng-app指令用來(lái)初始化AngularJS application。

　　ng-init指令用來(lái)初始化application數(shù)據(jù)。

　　ng-model指令用來(lái)將HTML控件（如input，select，textarea等）的值綁定到application數(shù)據(jù)。

<div ng-app="" ng-init="firstName='John'"><p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p></div>

運(yùn)行

　　ng-app指令同時(shí)也告訴AngularJS，它所在的<div>元素是AngularJS application的根元素，即作用域。

---

數(shù)據(jù)綁定

　　在上面的示例中，{{ firstName }}是一個(gè)AngularJS數(shù)據(jù)綁定表達(dá)式。

　　在AngularJS數(shù)據(jù)綁定中，AngularJS表達(dá)式使用AngularJS數(shù)據(jù)進(jìn)行同步更新。

　　{{ firstName }}通過(guò)ng-model="firstName"同步更新數(shù)據(jù)。

<div ng-app="" ng-init="quantity=1;price=5">Quantity: <input type="number" ng-model="quantity"> Costs: <input type="number" ng-model="price">Total in dollar: {{ quantity * price }}</div>

運(yùn)行

使用ng-init指令在AngularJS開(kāi)發(fā)中非常普遍。在控制器一節(jié)中你將會(huì)看到更好的初始化數(shù)據(jù)的方法。

---

重復(fù)HTML元素

　　ng-repeat指令用來(lái)重復(fù)創(chuàng)建一個(gè)HTML元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><ul><li ng-repeat="x in names">{{ x }}</li></ul> </div>

運(yùn)行

　　在對(duì)象數(shù)組上使用ng-repeat指令：

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"><ul><li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li> </ul></div>

運(yùn)行

AngularJS非常適合數(shù)據(jù)庫(kù)CRUD（即創(chuàng)建，讀取，更新和刪除）操作。想象一下，如果這些對(duì)象來(lái)自于數(shù)據(jù)庫(kù)呢？

---

ng-app指令

　　ng-app指令定義了AngularJS application的根元素。

　　當(dāng)Web頁(yè)面加載完成后，ng-app指令將auto-bootstrap（自動(dòng)初始化）application。即自動(dòng)初始化并引導(dǎo)AngularJS application執(zhí)行。

　　在后面的章節(jié)中你將會(huì)學(xué)習(xí)到如何給ng-app指令指定一個(gè)值（例如ng-app="myModule"），從而與模塊聯(lián)系起來(lái)。

---

ng-init指令

　　ng-init指令用于為AngularJS application初始化值。

　　一般情況下不需要使用ng-init指令，而是使用控制器或者模塊來(lái)進(jìn)行初始化工作。

　　在后面的章節(jié)中你將會(huì)學(xué)習(xí)到有關(guān)控制器和模塊的相關(guān)內(nèi)容。

---

ng-model指令

　　ng-model指令用來(lái)將HTML控件（如input，select，textarea等）的值綁定到application數(shù)據(jù)。

　　ng-model指令還可以用來(lái)：

• 提供數(shù)據(jù)驗(yàn)證（如驗(yàn)證數(shù)字，email地址，必填項(xiàng)）。
• 提供數(shù)據(jù)的狀態(tài)（如invalid，dirty，touched，error）。
• 為HTML元素提供CSS樣式類(lèi)。
• 將HTML元素綁定到HTML表單。

---

ng-repeat指令

　　ng-repeat指令用來(lái)為數(shù)據(jù)集合（或者數(shù)組）中的每一個(gè)元素生成一個(gè)對(duì)應(yīng)的HTML元素。

本文轉(zhuǎn)自Jaxu博客園博客，原文鏈接：http://www.cnblogs.com/jaxu/p/4486623.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的AngularJS快速入门指南04：指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。