最新的Web開發教程
 

AngularJS HTML DOM


AngularJS具有用於應用數據綁定到的HTML DOM元素的屬性的指令。


在NG-禁用指令

NG-禁用指令結合AngularJS應用程序數據的HTML元素的disabled屬性。

AngularJS例

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

<p>
{{ mySwitch }}
</p>

</div>
試一試»

應用解釋說:

NG-禁用指令綁定應用程序數據是myswitch到HTML按鈕的禁用屬性。

NG-模型指令綁定HTML checkbox元素來是myswitch價值的價值。

如果是myswitch的價值評估為true,按鈕將被禁用:

<p>
<button disabled>Click Me!</button>
</p>

如果是myswitch的值計算為false,按鈕將不會被禁用:

<p>
<button>Click Me!</button>
</p>

吳秀指令

吳秀指令顯示或隱藏的HTML元素。

AngularJS例

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>
試一試»

吳秀節目的指令(或隱藏)的基礎上的NG-顯示的HTML元素。

您可以使用計算結果為真或假的表達式:

AngularJS例

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>
試一試»
注意 在下一章中,還有更多的例子,用一個按鈕的點擊隱藏HTML元素。

該NG-hide指令

NG-hide指令隱藏或顯示一個HTML元素。

AngularJS例

<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>
試一試»