谈谈AngularJs中的隐藏和显示


Posted in Javascript onDecember 09, 2015

 AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。

代码如下所示:

<!DOCTYPE html>
<html ng-app="a2_12">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>
<style type="text/css">
body{
font-size: 12px;
}
ul{
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
div{
margin: 8px 0px;
}
</style>
</head>
<body>
<div ng-controller="c2_12">
<div ng-show="{{isShow}}">陶国荣</div>
<div ng-hide="{{isHide}}">1012@qq.con</div>
<ul ng-switch on={{switch}}>
<li ng-switch-when="1">11111111111111111</li>
<li ng-switch-when="2">22222222222222222</li>
<li ng-switch-default>33333333333333333</li>
</ul>
</div>
<script type="text/javascript">
var a2_12 = angular.module('a2_12', []);
a2_12.controller('c2_12', ['$scope', function($scope) {
$scope.isShow=true;
$scope.isHide=false;
$scope.switch=2;
}]);
</script>
</body>
</html>

ng-switch指令的功能是显示匹配成功的元素,该指令需要结合ng-switch-when和ng-switch-default指令使用.
当指定的on值与某个或多个添加ng-switch-when指令的元素匹配时,这些元素显示,未匹配到的元素的隐藏.
如果没有找到与on值相匹配的元素时,则显示添加了ng-switch-default指令的元素.

以上所述就是本文给大家介绍的AngularJs中的隐藏和显示全部内容,希望大家喜欢。

Javascript 相关文章推荐
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
javascript如何写热点图
Dec 08 #Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 #Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 #Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 #Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
实现PHP搜索加分页
2016/10/12 PHP
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Python可变参数函数用法实例
2015/07/07 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
js实现弹框效果
2021/03/24 Javascript
草船借箭教学反思
2014/02/03 职场文书
运动会入场词60字
2014/02/15 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
react中的DOM操作实现
2021/06/30 Javascript
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技