AngularJS改变元素显示状态


Posted in Javascript onApril 20, 2017

前言

本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。

控制html元素显示和隐藏有n种方法:html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom,5行代码搞不定吧,而且毫无技术含量。

实例1

<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>

两个指令很简单,只是ng-show在true时显示,false时隐藏,而ng-hide效果相反。

对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样,Angular是通过修改数据模型的方式来驱动UI刷新,然后通过指令把变更反应到UI上。

ng-show和ng-hide这两条指令的功能是等价的,但是运行效果正好相反,我们都可以根据所传递的表达式来显示或隐藏元素。也就是说,ng-show在表达式为true时将会显示元素,为false时将会隐藏元素;而ng-hide则恰好相反。

工作原理

这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block来显示元素;设置为display:none来隐藏元素。

实例2

<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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
vue.js的提示组件
Mar 02 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
You might like
destoon复制新模块的方法
2014/06/21 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php文件包含的几种方式总结
2019/09/19 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
VsCode插件整理(小结)
2017/09/14 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
对python中大文件的导入与导出方法详解
2018/12/28 Python
python elasticsearch环境搭建详解
2019/09/02 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Django models filter筛选条件详解
2020/03/16 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
师范生实习个人的自我评价
2013/09/28 职场文书
寒假家长评语大全
2014/04/16 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python