对于菜单、上下文敏感的工具以及很多其他情况来说，显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样，Angular是通过修改数据模型的方式来驱动UI刷新，然后通过指令把变更反应到UI上。
ng-show和ng-hide这两条指令的功能是等价的，但是运行效果正好相反，我们都可以根据所传递的表达式来显示或隐藏元素。也就是说，ng-show在表达式为true时将会显示元素，为false时将会隐藏元素；而ng-hide则恰好相反。
这两条指令的工作原理是：根据实际情况把元素的样式设置为display:block来显示元素；设置为display:none来隐藏元素。
实例：
<html ng-app='myApp'>
<head>
<title>ng-show实例</title>
</head>
<body ng-controller='ShowController'>
<button ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show='menuState.show'>
<li>Stun</li>
<li>Disintegrate</li>
<li>Erase from history</li>
</ul>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('myApp',[])
myApp.controller('ShowController', function($scope) {
$scope.menuState = {
show: false
}
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
}
});
</script>
</body>
</html>
运行结果：
点击“Toggle Menu”按钮，效果如下：
再次点击“Toggle Menu”按钮，下面的信息又隐藏了，交替变换。
相关推荐
本文给大家介绍angularjs 隐藏和显示，对angularjs 隐藏和显示相关知识感兴趣的朋友一起学习吧
主要介绍了AngularJS打开页面隐藏显示表达式用法,结合实例形式分析了AngularJS中打开页面隐藏显示表达式相关命令使用技巧,需要的朋友可以参考下
主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下
简单的angularjs指令下拉框。源代码
AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。...→界面中显示/隐藏的区域提供ng-if和controller中
主要介绍了AngularJS实现元素显示和隐藏的几个案例，需要的朋友可以参考下
DOM元素的显示与隐藏 ，是前端开发中常常会用到的功能，AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean。 【HTML代码】 <!DOCTYPE ...
今天小编就为大家分享一篇angularJs复选框checkbox选中进行ng-show显示隐藏的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
他曾在Devoxx UK和其他活动中发表过有关AngularJS的演讲，并开办过AngularJS的培训课程。他希望帮助企业更好地利用AngularJS。 目录 序1 第1章Angular之禅7 11邂逅AngularJS7 熟悉框架8 参与AngularJS项目8 ...
本篇文章主要介绍了angularjs2 ng2 密码隐藏显示的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js设置控件的隐藏与显示，设置控件style的display和visibility属性就可以了。 用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。 当style.display=”block”或s
本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。 控制html元素显示和隐藏有n种方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天...
避免使用 jQuery 来操作 DOM，包括增加元素节点，移除元素节点，获取元素内容，隐藏或显示元素。你应该使用 directives 来实现这些动作，有必要的话你还要编写自己的 directives。 如果你感到很难改变习惯，那么考虑...
AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。...AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素"背后"添加代码。 AngularJS 支持输入验证。
AngularJS 简介 AngularJS 是一个 JavaScript 框架。... AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 什么是 AngularJS？...AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 H
今天我们来看看怎样使用Angular的ngShow 和ngHide 指令来完成它们听起来应该完成的，显示和隐藏！ 它们应该做的事 ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会...