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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
JavaScript this关键字的深入详解
Jan 14 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表单提交问题的解决方法
2011/04/12 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python批量修改图片大小的方法
2018/07/24 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python:动态路由的Flask程序代码
2019/11/22 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
校园联欢晚会主持词
2014/03/17 职场文书
电气自动化求职信
2014/06/24 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
python获取字符串中的email
2022/03/31 Python