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

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

　　ng-app指令用來初始化AngularJS application。

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

　　ng-model指令用來將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>

　　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 }}通過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>

Note 使用ng-init指令在AngularJS開發(fā)中非常普遍。在控制器一節(jié)中你將會(huì)看到更好的初始化數(shù)據(jù)的方法。
重復(fù)HTML元素
　　ng-repeat指令用來重復(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>

　　在對象數(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>

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

ng-app指令

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

　　當(dāng)Web頁面加載完成后，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)系起來。

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

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

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

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

　　ng-model指令還可以用來：

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

ng-repeat指令

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

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

最新評論