AngularJS如何实现DOM元素的显示与隐藏功能？

AngularJS 作为一款经典的前端框架，通过其强大的数据绑定和指令系统，为 DOM 元素的显示与隐藏提供了灵活的解决方案，在实际开发中，根据业务需求动态控制元素可见性是常见需求，AngularJS 主要通过 ng-show、ng-hide、ng-if 及条件表达式实现这一功能，每种方式均有其适用场景和底层逻辑差异。

基础指令：ng-show 与 ng-hide

ng-show 和 ng-hide 是 AngularJS 中控制元素显示与隐藏最直接的指令，两者均通过操作 CSS 的 display 属性实现。ng-show 指令接受一个布尔表达式，当表达式为 true 时，元素会显示（display: block）；为 false 时，元素隐藏（display: none），与之相反，ng-hide 指令在表达式为 true 时隐藏元素，为 false 时显示元素，本质上，两者功能等价，ng-hide = "!ng-show"，开发者可根据语义习惯选择使用。

在用户登录场景中,可通过 ng-show 控制欢迎信息的显示：

<div ng-show="isLoggedIn">欢迎回来，{{ username }}！</div>

当 isLoggedIn 为 true 时，该 div 元素将显示在页面上，需要注意的是，ng-show 和 ng-hide 只是切换元素的 display 属性，元素始终存在于 DOM 中，因此不会影响作用域的创建与销毁，适合频繁切换显示状态的场景。

条件渲染：ng-if 指令

与 ng-show/ng-hide 不同，ng-if 通过动态添加或移除 DOM 元素来控制显示与隐藏，当表达式为 true 时，AngularJS 会在 DOM 中创建并插入该元素及其子元素，同时初始化相关的作用域；当表达式为 false 时，元素及其子元素会被从 DOM 中移除，作用域也会被销毁，这种“真移除、假创建”的机制使得 ng-if 在处理复杂组件或需要节省内存的场景下更具优势。

在表单分步提交中,可用 ng-if 控制不同步骤的表单显示：

<div ng-if="currentStep === 1">第一步：填写基本信息</div>
<div ng-if="currentStep === 2">第二步：确认提交信息</div>

当 currentStep 变化时，对应的表单部分会动态加载或销毁，避免一次性渲染所有表单内容，提升页面性能，但需注意，频繁切换 ng-if 可能导致重复创建和销毁 DOM 元素，带来性能开销，适合切换频率较低的场景。

条件表达式的灵活运用

无论是 ng-show/ng-hide 还是 ng-if，其核心均依赖于表达式的布尔值判断，AngularJS 支持在表达式中使用变量、函数、比较运算符等，实现复杂的条件逻辑，可通过对象属性或函数返回值控制显示：

<div ng-show="user.age >= 18">已成年用户</div>
<div ng-if="hasPermission('edit')">编辑按钮</div>

hasPermission 是作用域内定义的函数，用于判断用户权限，还可结合 ng-switch 指令实现多条件分支渲染，但需注意 ng-switch 会移除不匹配条件的 DOM 节点，与 ng-if 类似。

不同指令的对比与选择

为更直观地理解三种指令的差异,可通过下表进行对比：

注意事项

在使用 AngularJS 控制元素显示与隐藏时，需注意以下几点：

1. 作用域继承：ng-if 会创建新作用域，若在指令中使用，需通过 $parent 或 as 语法访问父作用域变量。
2. 动画支持：ng-show/ng-hide 可结合 ngAnimate 模块实现显示/隐藏的过渡动画，而 ng-if 需通过 ngAnimate 的 enter/leave 事件实现。
3. 表达式性能：避免在表达式中编写复杂逻辑，建议将判断逻辑封装为函数，提升代码可读性和维护性。

通过合理选择 ng-show、ng-hide 和 ng-if 指令，结合灵活的条件表达式，开发者可以高效实现 AngularJS 项目中 DOM 元素的动态显示与隐藏功能，在保证性能的同时提升用户体验。