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的变量作用域深入理解
Oct 25 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
$.extend 的一个小问题
Jun 18 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
微信小程序实现单个或多个倒计时功能
Nov 01 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之PHP语法学习笔记1
2006/12/17 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
js+html制作简单验证码
2017/02/16 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python httplib模块使用实例
2015/04/11 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python简单贪吃蛇开发
2019/01/28 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python内置加密模块用法解析
2019/11/25 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
UML设计模式笔试题
2014/06/07 面试题
大学生护理专业自荐信
2013/10/03 职场文书
前台接待岗位职责
2013/12/03 职场文书
挂职思想汇报
2013/12/31 职场文书
五年级英语教学反思
2014/01/31 职场文书
中学教师培训制度
2014/01/31 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
关于安全的广播稿
2014/10/23 职场文书
骨干教师事迹材料
2014/12/17 职场文书
小学生差生评语
2014/12/29 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL