谈谈AngularJs中的隐藏和显示
更新时间：2015年12月09日 09:13:58 作者：思思博士
本文给大家介绍angularjs 隐藏和显示，对angularjs 隐藏和显示相关知识感兴趣的朋友一起学习吧
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中的隐藏和显示全部内容，希望大家喜欢。
相关文章
理解Angular的providers给Http添加默认headers
本篇文章主要介绍了理解Angular的providers给Http添加默认headers，具有一定的参考价值，有兴趣的同学可以了解一下2017-07-07
Angular 的 Change Detection机制实现详解
这篇文章主要为大家介绍了Angular 的 Change Detection机制实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了AngularJS实现自定义指令及指令配置项的方法,结合实例形式简单总结分析了AngularJS自定义指令及指令配置项的实现技巧,需要的朋友可以参考下2017-11-11
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
这篇文章主要介绍了angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴，下面来一起看看吧。2016-09-09
这篇文章主要介绍了AngularJS中ng-class用法,结合实例形式分析了ng-class的功能、使用方法与相关注意事项,需要的朋友可以参考下2017-07-07
本文主要介绍AngularJS 依赖注入,这里对依赖注入做了详细介绍讲解,并提供效果图和示例代码以便学习参考2016-07-07
今天小编就为大家分享一篇angularjs $http调用接口的方式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本篇文章主要介绍了浅谈Angular文字折叠展开组件的原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
AngularJS实践之使用NgModelController进行数据绑定
大家都知道AngularJS中的指令是其尤为复杂的一个部分，但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中，利用ngModel的controller来做双向数据绑定，本文对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴。2016-10-10
最新评论