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 相关文章推荐
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
校长先进事迹材料
2014/02/01 职场文书
工作迟到检讨书
2014/02/21 职场文书
个人函授自我鉴定
2014/03/25 职场文书
党课培训心得体会
2014/09/02 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
学生安全责任协议书
2016/03/22 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
详解flex:1什么意思
2022/07/23 HTML / CSS