AngularJS HTML DOM

AngularJS 具有将应用程序数据绑定到 HTML DOM 元素属性的指令。

ng-disabled 指令

这个NG-禁用指令将 AngularJS 应用程序数据绑定到 HTML 元素的禁用属性。

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-禁用指令绑定应用程序数据我的交换机到 HTML 按钮的残疾人属性。

这个ng-模型指令将 HTML 复选框元素的值绑定到我的交换机。

如果值我的交换机评估为真的，该按钮将被禁用：

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

如果值我的交换机评估为错误的，该按钮不会被禁用：

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

ng-show 指令

这个ng-show指令显示或隐藏 HTML 元素。

AngularJS 示例

<div ng-app="">

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

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

</div>

亲自试一试 »

ng-show 指令显示（或隐藏）基于以下内容的 HTML 元素值ng-show.

您可以使用任何计算结果为 true 或 false 的表达式：

AngularJS 示例

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

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

</div>

亲自试一试 »

在下一章中，有更多示例，使用单击按钮来隐藏 HTML 元素。

ng-hide 指令

这个ng-隐藏指令隐藏或显示 HTML 元素。

AngularJS 示例

<div ng-app="">

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

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

</div>

亲自试一试 »