谈谈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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Js面试算法详解
Apr 08 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
div层的移动及性能优化
2010/11/16 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
高中体育教学反思
2014/01/24 职场文书
同学聚会祝酒词
2015/08/10 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Java 数据结构七大排序使用分析
2022/04/02 Java/Android