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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
canvas绘制环形进度条
Feb 23 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
vue的mixins属性详解
Mar 14 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php UBB 解析实现代码
2011/11/27 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php时间计算相关问题小结
2016/05/09 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
微信小程序实现电子签名功能
2020/07/29 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
详解Python在七牛云平台的应用(一)
2017/12/05 Python
pandas string转dataframe的方法
2018/04/11 Python
python事件驱动event实现详解
2018/11/21 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
长青弘远的面试题
2012/06/09 面试题
物业工作计划书
2014/01/10 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis