angular学习笔记(八)-控制视图显示隐藏
本篇介绍angular控制视图的显示和隐藏:
通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏:
ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素
ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素
(其实只要用到其中一个就可以了)
下面来看个简单的例子,点击按钮可以显示/隐藏元素:
<!DOCTYPE html>
<html ng-app>
<head>
<title>5.1.显示和隐藏</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ShowHide">
<ul>
<button ng-click="toggleShow()">{{text}}</button>
</ul>
<div class="content" ng-show="ifShow"></div>
</div>
</body>
</html>
function ShowHide ($scope){
$scope.text = "点击显示框";
$scope.ifShow = false;
$scope.toggleShow = function(){
$scope.ifShow = !$scope.ifShow;
$scope.text = $scope.text=='点击显示框' ? '点击隐藏框' : '点击显示框'
}
}
给button绑定点击事件回调,点击的时候触发toggleShow回调
toggleShow回调会对ifShow变量取反,然后对应的ui的就是被隐藏/显示
同时,toggleShow回调也改变按钮的文本提示
原始页面:
点击按钮后:
再次点击后:
angular学习笔记(八)-控制视图显示隐藏的更多相关文章
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- 【opencv学习笔记八】创建TrackBar轨迹条
createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- 多个div独立控制其显示/隐藏
今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...
- Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
随机推荐
- Hotaru's problem(hdu5371+Manacher)多校7
Hotaru's problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- 算法笔记_122:蓝桥杯第七届省赛(Java语言A组)试题解答
目录 1 煤球数目 2 生日蜡烛 3 搭积木 4 分小组 5 抽签 6 寒假作业 7 剪邮票 8 取球博弈 9 交换瓶子 10 压缩变换 前言:以下试题解答代码部分仅供参考,若有不当之处,还请路 ...
- 解决org/sonarsource/scanner/maven/SonarQubeMojo : Unsupported major.minor version 52.0
ide jdk 版本换成对应的 如:sonarqube-6.3 --> jdk1.8
- linux sar命令详细说明相关参数
详细说明linux的sar命令 sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括: ...
- IDEA 开发环境中 调试Spark SQL及遇到问题解决办法
1.问题 java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space // :: WAR ...
- Geeks Union-Find Algorithm Union By Rank and Path Compression 图环算法
相同是查找一个图是否有环的算法,可是这个算法非常牛逼,构造树的时候能够达到O(lgn)时间效率.n代表顶点数 原因是依据须要缩减了树的高度,也叫压缩路径(Path compression),名字非常高 ...
- Android Listview 隐藏滚动条
在<ListView>标签中设置属性. android:fastScrollEnabled="false" 以下属性scrollbars可以设置为none也可以不设置为 ...
- HDUOJ--------(1198)Farm Irrigation
Farm Irrigation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Oracle JDBC配置
Oracle数据库是收费的,Oracle的JDBC驱动在Maven仓库中虽有其名,却无法下载到jar包. 这就需要手动下载Oracle JDBC驱动并将其安装到本地Maven仓库中. 如果从官网下载, ...
- Block编程注意的问题
一,前言 block 是在 iOS 4 中引入的新特性,它和 C++ 11 中的 lamba 表达式概念相似,有时候也被称为闭包.经过一段时间的使用,我发现要用对用好 block 还是有不少需要注 ...