AngularJS 中如何使用 ng-show 和 ng-hide 控制单个 DOM 元素的显示与隐藏

在 AngularJS 中，我们可以使用指令 ng-show 和 ng-hide 来控制单个 DOM 元素的显示和隐藏。这两个指令非常实用，可以帮助我们根据特定的条件来动态地显示或隐藏页面元素。

ng-show 和 ng-hide 的用法

ng-show 和 ng-hide 都接受一个表达式作为参数，该表达式的值决定了元素的显示或隐藏状态。如果表达式的值为 true，则元素将被显示；如果表达式的值为 false，则元素将被隐藏。

下面是 ng-show 和 ng-hide 的用法示例：

<!-- 使用 ng-show 控制元素的显示和隐藏 -->
<div ng-show="showElement">我是要显示的元素</div>

<!-- 使用 ng-hide 控制元素的显示和隐藏 -->
<div ng-hide="hideElement">我是要隐藏的元素</div>

在上面的示例中，showElement 和 hideElement 都是作为 ng-show 和 ng-hide 的参数传递的表达式。这些表达式可以是任何能够返回 true 或 false 的逻辑表达式。

ng-show 和 ng-hide 的指令优先级

需要注意的是，ng-show 和 ng-hide 的指令优先级比较低，如果同时在同一个元素上使用 ng-show 和 ng-hide，只有 ng-show 生效，而 ng-hide 会被忽略。因此，我们应该在同一个元素上只使用其中一个指令。

ng-show 和 ng-hide 的示例

下面是一个使用 ng-show 的示例，当用户点击按钮时，显示一个提示框：

<div ng-show="showMessage" class="alert alert-success">
    操作成功！
</div>

<button ng-click="showMessage = true" class="btn btn-primary">显示提示框</button>

在上面的示例中，当用户点击按钮时，showMessage 的值将被设置为 true，从而显示提示框。

下面是一个使用 ng-hide 的示例，当用户输入密码时，显示一个密码强度指示器：

<div ng-hide="password.length < 6" class="alert alert-info">
    密码强度：强
</div>

<input type="password" ng-model="password" class="form-control" placeholder="请输入密码">

在上面的示例中，当用户输入的密码长度小于 6 时，password.length < 6 的值为 true，密码强度指示器将被隐藏。当用户输入的密码长度大于等于 6 时，password.length < 6 的值为 false，密码强度指示器将被显示。

总结

在 AngularJS 中，我们可以使用 ng-show 和 ng-hide 来控制单个 DOM 元素的显示和隐藏。这两个指令非常实用，可以帮助我们根据特定的条件来动态地显示或隐藏页面元素。需要注意的是，ng-show 和 ng-hide 的指令优先级比较低，如果同时在同一个元素上使用 ng-show 和 ng-hide，只有 ng-show 生效，而 ng-hide 会被忽略。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f5279c2b3ccec22fd4a16c