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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
js实现弹幕飞机效果
Aug 27 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
php array_merge下进行数组合并的代码
2008/07/22 PHP
php 一元分词算法
2009/11/30 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP文件上传类实例详解
2016/04/08 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
js操作select控件的几种方法
2010/06/02 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python中threading超线程用法实例分析
2015/05/16 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python实现简单的2048小游戏
2021/03/01 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
《花木兰》教学反思
2014/04/09 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
务虚会发言材料
2014/12/25 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android