AngularJS快速入門指南10 DOM節點

2021-09-06 23:05:10 字數 1714 閱讀 4984

<

div

="">

<

p>

<

button

ng-disabled

="myswitch"

>click me!

button

>

p>

<

p>

<

input

type

="checkbox"

ng-model

="myswitch"

>

button

p>

div>

執行

**解釋:

ng-model指令將html checkbox元素的value值繫結到myswitch物件上。

如果myswitch的值為true,則button將被disabled掉:

<

p>

<

button

disabled

>click me!

button

>

p>

如果myswitch的值為false,則button不會被disabled掉:

<

p>

<

button

>click me!

button

>

p>

ng-show指令用來顯示或隱藏乙個html元素。

<

div

="">

<

p ng-show

="true"

>i am visible.

p>

<

p ng-show

="false"

>i am not visible.

p>

div>

執行

ng-show指令通過value值來顯示(或隱藏)乙個html元素。

你可以使用任何能返回true或false的表示式,例如:

<

div

="">

<

p ng-show

="hour > 12"

>i am visible.

p>

div>

執行

在接下來的章節中會有更多有關通過button的click事件來隱藏html元素的例子。

我們也可以通過ng-hide指令來隱藏或顯示乙個html元素。

<

div

="">

<

p ng-hide

="true"

>i am not visible.

p>

<

p ng-hide

="false"

>i am visible.

p>

div>

執行

上一章 - angularjs快速入門指南09:sql

下一章 - angularjs快速入門指南11:事件

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的一些基本特性,例如指令 表示式 過濾器 模組和控制...