本篇介绍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学习笔记(八)-控制视图显示隐藏的更多相关文章

  1. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  2. 【opencv学习笔记八】创建TrackBar轨迹条

    createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...

  3. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  4. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  5. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  6. 多个div独立控制其显示/隐藏

    今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...

  7. Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  8. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  9. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

随机推荐

  1. Win10 专业版激活！

    从Win8.1(无论盗版正版),只要符合计算机处理器位数(32或64),就可以 利用: QJNXR-YD97Q-K7WH4-RYWQ8-6MT6Y 激活你的永久Win10,且激活后记录当前设备信息,版 ...

  2. Android Studio怎样加入工程（project）为library（针对非gradle）

    这篇文章还是针对非gradle build的project,gradle build有一些区别.在Eclipse要引用别的project为本project的library非常easy,可是在Andro ...

  3. PHP匿名函数如何理解，什么是匿名函数

    揭秘PHP匿名函数 定义:匿名函数就是没有名字的函数. 有2种形式的匿名函数: 形式1:将一个匿名函数"赋值"给一个变量——此时该变量就代表该匿名函数了! 形式2: 是直接将一个匿 ...

  4. maven的下载以及安装

    1.下载Maven 打开链接:https://maven.apache.org/download.cgi 下载好之后解压到一个盘,我的是解压到F:\Maven\apache-maven-3.5.3-b ...

  5. http 请求报文和响应报文

    1.请求报文 示例: 2.响应报文 示例:

  6. Codeforces Round #228 (Div. 1) C 贪心

    嘎嘎,今天被一些事耽误了,可是还是A了几个题目,这道题还不错 题目链接: 题意:两个人玩游戏,有N堆纸牌,纸牌上有数字,A每次仅仅能取N堆中的 当中一个的顶部的 纸牌,B仅仅能取N堆中的当中一个底部 ...

  7. eclipse git提交代码

    1.安装git 2.安装好后,进行,一个简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configuration 设置自定义仓库 3.登 ...

  8. svn,git,scp,rsync,rake,ssh,wget,axel,aria2,nohup,grep,tail,siege,mitmproxy,ulimit,netstat,lsof

    scp 把本地文件上传到server上 scp -P 1234 config/cert/dev/client.pem dev@xx.xxx.xxx:/srv/rorapps/fgcc/config/c ...

  9. gzip和zipfile模块

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #gzip和zipfile模块 #http://www.open-open.com/lib/view/open ...

  10. 域名无法解析 Linux临时或永久修改DNS

    最近给VPS重装了系统,因为服务商不提供DHCP,所以只好手动设置IP和DNS Server.悲催的是系统重装的时候忘记了输入DNS Server,最后导致进去系统后,各种域名无法解析. Linux中 ...