1、问题背景
AngularJS的ng-show指令，当值为true，HTML元素显示；当值为false，HTML元素隐藏
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之ng-show指令</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="flag=true">
<button ng-show="flag">查询</button><br>
<input type="checkbox" ng-model="flag" />老鼠<br>
<input type="radio" ng-show="!flag" />猫<br>
<label>{{flag}}</label>
</div>
</body>
</html>
3、实现源码
（1）勾选复选框
勾选复选框，按钮显示，单选框隐藏
![]()
（2）取消勾选复选框
取消勾选复选框，按钮隐藏，单选框显示
![]()
分享到：
相关推荐
`ng-show`指令是AngularJS中一个非常常用的功能，它允许我们根据指定的表达式的值来控制元素的可见性。 ### `ng-show`指令的定义与用法 `ng-show`指令用于根据AngularJS表达式的值来决定元素是否应该在页面上显示...
当用户勾选复选框时，ng-model指令将showDetails的值设置为true，ng-open指令检测到showDetails为true后，使得标签内容显示。取消勾选时，showDetails值变为false，标签内容随之隐藏。 AngularJS框架通过数据绑定...
在AngularJS中，`ng-repeat`指令用于循环遍历数组或对象，生成DOM元素，它在构建可重用和动态的UI组件时非常有用。在本例中，开发者遇到的问题是在`ng-repeat`循环中包含动态HTML，这些HTML中还嵌套了自定义指令。...
如果需要更丰富的动画效果，可以考虑使用ng-show指令的补充指令，如ng-if或者ng-switch，或者结合CSS3动画。 对于ng-hide指令，理解其背后的原理和使用场景非常重要，这样开发者才能够充分地利用它来简化代码，提高...
AngularJS 是一个强大的前端JavaScript框架，它通过声明式的特性简化了网页应用的开发。...在实际项目中，`ng-mouseover`经常与其他AngularJS特性如`ng-click`、`ng-show`等结合使用，以创建丰富的用户界面和交互体验。
在处理多个条件分支时，相比于使用多个`ng-if`或`ng-show/hide`，`ng-switch`通常更为高效和简洁。 总之，`ng-switch` 是AngularJS中用于条件渲染的一个重要指令，它允许根据模型变量的值动态控制HTML片段的显示。...
在AngularJS中，`ng-repeat` 指令是核心功能之一，用于根据数组中的元素创建可复用的DOM元素，例如在创建列表或下拉框时非常有用。 ### 1. ng-repeat 指令介绍 `ng-repeat` 是AngularJS中的一个指令，用于迭代数组...
`ng-model` 指令是 AngularJS 中的核心组件之一，它主要用于实现视图（View）和模型（Model）之间的绑定。这允许开发者在 HTML 控件（如 input、select 和 textarea）与 AngularJS 应用程序的数据之间建立直接的连接...
在AngularJS中，`ng-if`是一个非常有用的指令，它用于条件性地渲染DOM元素。然而，当`ng-if`与`ng-model`一起使用时，可能会遇到`ng-model`值无法更新的问题，这是因为`ng-if`创建了一个新的子作用域，导致`ng-model...
* ng-show 指令：根据条件显示或隐藏元素 * ng-hide 指令：根据条件隐藏元素 六、AngularJS重复语句 * ng-repeat 指令：重复显示元素 七、AngularJS过滤器 * filter 指令：过滤数据 * 自定义过滤器：如何创建...
#### 四、分支语句之 ng-switch/ng-if/ng-show/ng-hide/ng-disabled 标签 **功能概述**：这些指令允许根据条件控制DOM元素的显示或隐藏。 **应用场景**：在不同的情况下显示不同的UI元素。 **使用示例**： ```...
在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中，我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng...
在AngularJS中，`ng-class`指令用于动态地根据表达式的值来添加或删除CSS类。这个特性在创建复杂的交互式界面时非常有用，尤其是在处理元素的显示状态和样式变化时。本文将深入探讨如何使用`ng-class`来切换类，并...
在AngularJS中，ng-table是一个强大的模块，用于创建动态、可配置的表格，它提供了诸如搜索、排序、分页和自定义列头等功能。在本文中，我们将深入探讨如何使用ng-table来创建高效的表格。 首先，为了使用ng-table...
你可以使用ng-repeat指令展示列表，ng-if或ng-show/hide控制元素的可见性，以及ng-model实现双向数据绑定。 4. **表单处理**：掌握表单验证和提交。AngularJS的ng-form和ng-model指令可以方便地实现表单的双向绑定...
例如，ng-repeat指令用于循环渲染列表，ng-show/hide则用来控制元素的显示和隐藏。 服务在AngularJS中扮演着重要的角色。它们是可复用的实体，可以提供某种功能或者存储共享数据。常见的服务如$http用于与服务器...
总之，ng-if、ng-show和ng-hide是AngularJS中用于控制元素显示与隐藏的三个常用指令，它们各自有不同的特点和适用场景。在使用时，要充分理解其内部工作原理以及可能带来的影响，才能在项目开发中做出恰当的选择，...