谈谈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中的隐藏和显示全部内容，希望大家喜欢。

赞 (0)

相关推荐

  • AngularJS实现DOM元素的显示与隐藏功能

    本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu

  • AngularJS改变元素显示状态

    前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:html的hidden.css的display.jQuery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 实例1 <body> <div ng-contro

  • AngularJS中实现显示或隐藏动画效果的方式总结

    AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage →依赖:var app = angular.module("app",["ngAnimate"]); →

  • 谈谈AngularJs中的隐藏和显示

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). 代码如下所示: <!DOCTYPE html> <html ng-app="a2_12"> <head> <meta charset="utf-8"> <title></title> <script type=&quo

  • BootStrap中Table隐藏后显示问题的实现代码

    BootStrap中Table隐藏后显示问题的实现代码

    开始的时候先把table隐藏了,由于判断条件让它显示,结果出现错位的问题. //前台代码: <h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> <table id="faultanalysis-table"

  • 对angularJs中$sce服务安全显示html文本的实例

    如下所示: <div ng-app="module" ng-controller="ctrl"> {{data}} <hr> <div ng-bind-html="data"></div> <hr> <div ng-bind-html="title | trustHtml"></div> </div> <script>

  • AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法.分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bin

  • Android中实现EditText密码显示隐藏的方法

    Android中实现EditText密码显示隐藏的方法

    在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout,先看下效果图: <android.support.design.widget.TextInputLayout android:id="@+id/pwdLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:passw

  • Android中实现密码的隐藏和显示的示例

    Android中实现密码的隐藏和显示的示例

    在Android开发中,需要密码的隐藏和显示,下面就和大家分享一下使用方法: xml代码: <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/white" android:orientation="horizontal" > <TextView an

  • Android Dialog中软键盘的显示与隐藏的示例

    Android Dialog中软键盘的显示与隐藏的示例

    1.写在前面 本篇的主要内容是关于在Dialog中软键盘的显示与隐藏问题,需求是在Dialog中有一个密码输入框,弹出Dialog显示软键盘,关闭Dialog隐藏软键盘. 嗯,是不是有点简单,不过在实现的过程中还是遇到了一些问题,在试过了网上大部分的方法之后,最终找到了一个还不错的方法,分享给大家. 看下效果图: 2.实现过程 先说说最开始的实现方法: // 显示Dialog dialog.show(); // 显示软键盘 SoftInputUtils.showSoftInput(activit

  • Android开发中软键盘的显示和隐藏

    Android开发中软键盘的显示和隐藏

    本篇内容通过操作软键盘的函数着手详细分析了隐藏或者显示软键盘的实现方法,并且对其中重要的代码做了详细分析. 一.开篇 如果有需要用到输入的地方,通常会有需要自动弹出或者收起软键盘的需求.开篇明义,本文会讲讲弹出和收起软键盘的一些细节,最终还会从源码进行分析. 想要操作软键盘,需要使用到 InputMethodManager ,它是一个系统服务,可以使用 Context.getSystemService() 获取到它.而很多关键的逻辑代码,都是在 InputMethodManagerService

随机推荐