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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
js实现简易拖拽的示例
Oct 26 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生成WAP页面
2006/10/09 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
extjs两个tbar问题探讨
2013/08/08 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
python中的__slots__使用示例
2015/02/26 Python
python字典get()方法用法分析
2015/04/17 Python
使用python实现rsa算法代码
2016/02/17 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python主线程捕获子线程的方法
2018/06/17 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
关于python中的xpath解析定位
2020/03/06 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
会计实习自我鉴定
2013/12/04 职场文书
档案检查欢迎词
2014/01/13 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
Python Flask实现进度条
2022/05/11 Python