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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
谈谈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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Python易忽视知识点小结
2015/05/25 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
如何表示python中的相对路径
2020/07/08 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
培训讲师邀请函
2014/01/10 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
介绍信模板
2015/01/31 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
观看建国大业观后感
2015/06/01 职场文书
人代会简报
2015/07/21 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
python实现会员管理系统
2022/03/18 Python