AngularJS快速入門指南04 指令

2021-09-28 22:25:43 字數 1910 閱讀 4624

angularjs通過指令將html屬性進行了擴充套件。

angularjs指令是帶有ng-字首的擴充套件html屬性。

<

div

=""ng-init

="firstname='john'"

>

<

p>name: <

input

type

="text"

ng-model

="firstname"

>

p>

<

p>you wrote: }

p>

div>

執行

在上面的示例中,}是乙個angularjs資料繫結表示式。

在angularjs資料繫結中,angularjs表示式使用angularjs資料進行同步更新。

}通過ng-model="firstname"同步更新資料。

<

div

=""ng-init

="quantity=1;price=5"

>

quantity:

<

input

type

="number"

ng-model

="quantity"

>

costs:

<

input

type

="number"

ng-model

="price"

>

total in dollar: }

div>

執行

使用ng-init指令在angularjs開發中非常普遍。在控制器一節中你將會看到更好的初始化資料的方法。

ng-repeat指令用來重複建立乙個html元素:

<

div

=""ng-init

="names=['jani','hege','kai']"

>

<

ul>

<

li ng-repeat

="x in names"

>

}

li>

ul>

div>

執行

在物件陣列上使用ng-repeat指令:

<

div

=""ng-init

="names=[,,

]">

<

ul>

<

li ng-repeat

="x in names"

>}

li>

ul>

div>

執行

angularjs非常適合資料庫crud(即建立,讀取,更新和刪除)操作。想象一下,如果這些物件來自於資料庫呢?

一般情況下不需要使用ng-init指令,而是使用控制器或者模組來進行初始化工作。

ng-model指令還可以用來:

ng-repeat指令用來為資料集合(或者陣列)中的每乙個元素生成乙個對應的html元素。

上一章 - angularjs快速入門指南03:表示式

下一章 - angularjs快速入門指南05:控制器

更多專業前端知識,請上

【猿2048】www.mk2048.com

AngularJS快速入門指南11 事件

angularjs擁有自己的html事件指令。ng click指令定義了angularjs的click事件。div ng controller myctrl button ng click count count 1 click me button p p div 執行 ng hide true 將...

AngularJS快速入門指南01 導言

angularjs使用新的attributes擴充套件了html angularjs對單頁面應用的支援非常好 spas angularjs非常容易學習 本指南旨在幫助你盡可能快速而有效地學習angularjs。通過該指南你會學習到angularjs的一些基本特性,例如指令 表示式 過濾器 模組和控制...

AngularJS快速入門指南01 導言

angularjs使用新的attributes擴充套件了html angularjs對單頁面應用的支援非常好 spas angularjs非常容易學習 本指南旨在幫助你盡可能快速而有效地學習angularjs。通過該指南你會學習到angularjs的一些基本特性,例如指令 表示式 過濾器 模組和控制...