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 相关文章推荐
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
详解Python学习之安装pandas
2019/04/16 Python
python3.7 的新特性详解
2019/07/25 Python
python字典key不能是可以是啥类型
2020/08/04 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书