AngularJS实现元素显示和隐藏的几个案例


Posted in Javascript onDecember 09, 2015

案例一:控制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="../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="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>

运行结果:

AngularJS实现元素显示和隐藏的几个案例

点击“Toggle Menu”按钮,效果如下:

AngularJS实现元素显示和隐藏的几个案例

再次点击“Toggle Menu”按钮,下面的信息又隐藏了,交替变换。

案例三:

<!DOCTYPE html>
<html ng-app="a2_12">

 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="../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实现显示和隐藏的三个案例,希望对大家的学习有所帮助。

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
javascript如何写热点图
Dec 08 #Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 #Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 #Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
Python批量转换文件编码格式
2015/05/17 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
《威尼斯的小艇》教学反思
2014/02/17 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
企业授权委托书范本
2014/04/02 职场文书
中央空调节能方案
2014/06/15 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
JUnit5常用注解的使用
2021/07/02 Java/Android
python获取带有返回值的多线程
2022/05/02 Python