AngularJS HTML DOM
AngularJS 提供指令來將 AngularJS 應用程式資料繫結到 HTML DOM 元素的屬性。
ng-disabled 指令
ng-disabled 指令將 AngularJS 應用程式資料繫結到 HTML 元素的 disabled 屬性。
AngularJS Example
<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-disabled 指令將應用程式資料 mySwitch 繫結到 HTML 按鈕的 disabled 屬性。
ng-model 指令將 HTML 複選框元素的值繫結到 mySwitch 的值。
如果 mySwitch 的值為 true，按鈕將被停用：
<p>
<button disabled>Click Me!</button>
</p>
如果 mySwitch 的值為 false，按鈕將不會被停用：
<p>
<button>Click Me!</button>
</p>
ng-show 指令
ng-show 指令顯示或隱藏 HTML 元素。
AngularJS Example
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
自己動手試一試 »
ng-show 指令根據 ng-show 的值顯示（或隱藏） HTML 元素。
您可以使用任何評估為 true 或 false 的表示式
AngularJS Example
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
自己動手試一試 »
在下一章中，將有更多示例，使用按鈕點選來隱藏 HTML 元素。
ng-hide 指令
ng-hide 指令隱藏或顯示 HTML 元素。
AngularJS Example
<div ng-app="">
<p ng-hide="true">I am not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>
自己動手試一試 »
