AngularJS 操作 DOM 元素

一、概述

AngularJS 提供了一些指令，用于将应用数据绑定到 HTML DOM 元素的属性上，从而动态控制元素的状态和行为。

常用的指令包括：

指令	作用
ng-disabled	控制元素是否可用（disabled）
ng-show	控制元素是否显示
ng-hide	控制元素是否隐藏

---

二、ng-disabled 指令

ng-disabled 指令用于绑定应用程序数据到 HTML 的 disabled 属性。

示例

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

    <p>
        <button ng-disabled="mySwitch">点我!</button>
    </p>

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

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

</div>Code language: HTML, XML (xml)

说明

• ng-disabled="mySwitch"：将 mySwitch 的值绑定到 <button> 的 disabled 属性
• ng-model="mySwitch"：将 checkbox 的勾选状态双向绑定到 mySwitch
• 当 mySwitch 为 true 时，按钮不可用；为 false 时，按钮可用

通过勾选/取消勾选复选框，可以动态控制按钮的禁用状态。

---

三、ng-show 指令

ng-show 指令用于根据表达式的值决定是否显示 HTML 元素。

基本用法

<div ng-app="">

    <p ng-show="true">我是可见的。</p>

    <p ng-show="false">我是不可见的。</p>

</div>Code language: HTML, XML (xml)

使用表达式

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

    <p ng-show="hour > 12">我是可见的。</p>

</div>Code language: HTML, XML (xml)

说明

• ng-show="value" 中，value 为 true 时元素显示，false 时元素隐藏
• value 可以是一个表达式，AngularJS 会自动计算其布尔值

隐藏时元素仍存在于 DOM 中，只是通过 CSS 设置了 display:none。

---

四、ng-hide 指令

ng-hide 指令与 ng-show 相反，用于隐藏或显示 HTML 元素。

示例

<div ng-app="">

    <p ng-hide="true">我是不可见的。</p>

    <p ng-hide="false">我是可见的。</p>

</div>Code language: HTML, XML (xml)

说明

• ng-hide="true" → 元素隐藏
• ng-hide="false" → 元素显示

ng-show 和 ng-hide 可以互换使用，根据场景选择更易读的那个。

---

五、ng-show 与 ng-hide 对比

指令	值为 true	值为 false
ng-show	显示元素	隐藏元素
ng-hide	隐藏元素	显示元素

---

六、总结

• ng-disabled：动态控制表单元素的禁用/启用状态
• ng-show / ng-hide：动态控制元素的显示与隐藏
• 这些指令都支持直接绑定数据或使用表达式，让 DOM 操作变得声明式且简洁