AngularJS 指令

2022-04-15 14:23 更新

AngularJS 指令

本節(jié)為你介紹 AngularJS 使用的一些指令。

AngularJS 通過(guò)被稱為 指令 的新屬性來(lái)擴(kuò)展 HTML。


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)用程序 的"所有者"。

Note 一個(gè)網(wǎng)頁(yè)可以包含多個(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 }} 是通過(guò) ng-model="firstName" 進(jìn)行同步。

在下一個(gè)實(shí)例中,兩個(gè)文本域是通過(guò)兩個(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>

嘗試一下 ?
Note 使用 ng-init 不是很常見(jiàn)。您將在控制器一章中學(xué)習(xí)到一個(gè)更好的初始化數(shù)據(jù)的方式。

重復(fù) HTML 元素

ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素:

AngularJS 實(shí)例

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 來(lái)循環(huán)數(shù)組</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>

嘗試一下 ?

ng-repeat 指令用在一個(gè)對(duì)象數(shù)組上:

AngularJS 實(shí)例

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循環(huán)對(duì)象:</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

嘗試一下 ?
Note AngularJS 完美支持?jǐn)?shù)據(jù)庫(kù)的 CRUD(增加Create、讀取Read、更新Update、刪除Delete)應(yīng)用程序。
把實(shí)例中的對(duì)象想象成數(shù)據(jù)庫(kù)中的記錄。

ng-app 指令

ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素

ng-app 指令在網(wǎng)頁(yè)加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)(自動(dòng)初始化)應(yīng)用程序。

稍后您將學(xué)習(xí)到 ng-app 如何通過(guò)一個(gè)值(比如 ng-app="myModule")連接到代碼模塊。


ng-init 指令

ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值。

通常情況下,不使用 ng-init。您將使用一個(gè)控制器或模塊來(lái)代替它。

稍后您將學(xué)習(xí)更多有關(guān)控制器和模塊的知識(shí)。


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 元素

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)