欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【AngularJS实现元素显示和隐藏的几个案例】，下面是详细的讲解！
AngularJS实现元素显示和隐藏的几个案例
案例一：控制html元素显示和隐藏有n种方法：html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom，5行代码搞不定吧，而且毫无技术含量。
看代码：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-show and ng-hide directives</title>
</head>
<body>
<div ng-controller="VisibleController">
<p ng-show="visible">字符串1</p>
<p ng-hide="visible">字符串2</p>
<button ng-click="toggle()">切换</button>
</div>
<script src="http://www.jb51.net/article/../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function VisibleController($scope) {
$scope.visible=false;
$scope.toggle=function () {
$scope.visible=!$scope.visible;
}
}
</script>
</body>
</html>
案例二：对于菜单、上下文敏感的工具以及很多其他情况来说，显示和隐藏元素是一项核心的功能。与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="http://www.jb51.net/article/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”按钮，下面的信息又隐藏了，交替变换。
案例三：
<!DOCTYPE html> <html ng-app="a2_12"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.jb51.net/article/../js/angularJs-1.2.16-min.js"></script> <style type="text/css"> body{ font-size: 12px; } ul{ list-style-type: none; width: 408px; margin: 0px; padding: 0px; } div{ margin: 8px 0px; } </style> </head> <body> <div ng-controller="c2_12"> <div ng-show="{{isShow}}">脚本</div> <div ng-hide="{{isHide}}">1012@qq.con</div> <ul ng-switch on={{switch}}> <li ng-switch-when="1">11111111111111111</li> <li ng-switch-when="2">22222222222222222</li> <li ng-switch-default>33333333333333333</li> </ul> </div> <script type="text/javascript"> var a2_12=angular.module('a2_12', []); a2_12.controller('c2_12', ['$scope', function($scope) { $scope.isShow=true; $scope.isHide=false; $scope.switch=2; }]); </script> </body> </html>
ng-switch指令的功能是显示匹配成功的元素,该指令需要结合ng-switch-when和ng-switch-default指令使用。
当指定的on值与某个或多个添加ng-switch-when指令的元素匹配时,这些元素显示,未匹配到的元素的隐藏。
如果没有找到与on值相匹配的元素时,则显示添加了ng-switch-default指令的元素。
以上就是为大家分享的三个AngularJS实现显示和隐藏的三个案例，希望对大家的学习有所帮助。
关于AngularJS实现元素显示和隐藏的几个案例的用户互动如下：
相关问题：js问题，元素的显示隐藏
答：function nextSiblingEl (el) { do { el = el.nextSibling; } while (el && el.nodeType !== 1); return el;}function over (el) { nextSiblingEl(el).style.display = '';}function out (el) { nextSiblingEl(el).style.display = 'none';} 明... >>详细
相关问题：js实现隐藏网页中的某个元素
答：是隐藏哪些元素，行内还是块？ 试一下这个怎么样 function del(id){ var dom=document.getElementById(id); dom.style.display="none"; dom.style.height="0px"; dom.style.width="0px"; } >>详细
相关问题：如何在 AngularJS 里对隐藏元素数据绑定
答：jqLite in angularjs angular.element("#element-id") 这是一个DOM操作。Angular不会帮助你获得DOM的某个属性。 你需要使用的是DOM选择器，不管是原生的也好或者像jQuery这样的库也好。 获取ID的目标地是为了操作DOM, Angular的设计思想不是这样... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【addEventListener】addEventListener和attachEv
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【AngularJS】AngularJS语法详解-语法
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-