angularJS学习之路（十一）---ng-show和ng-hide

最新推荐文章于 2020-05-20 14:07:36 发布
最新推荐文章于 2020-05-20 14:07:36 发布
阅读量609 收藏
点赞数
分类专栏： angularjs 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014737138/article/details/49993953
版权

ng-show 和 ng-hide 根据表达式的值来显示或者隐藏HTML元素


ng-show   false   被隐藏

ng-hide true 被隐藏


<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<div ng-show="2 + 2 === 5">2 + 2 isn't 5, don't show</div>
		<div ng-show="2 + 2 === 4">2 + 2 is 4, do show</div>

		<div ng-hide="2 + 2 === 5">2 + 2 isnt 5, don't hide</div>
		<div ng-hide="2 + 2 === 4">2 + 2 isnt 5, do hide</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module("myApp", []);
		</script>
	</body>

</html>

另外注意判断符号是    ===

wust小吴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
10-19
在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中，我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程，需要的朋友可以参考。
(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
热门推荐
aty
03-30 7万+
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide是通过改变CSS的display属性值来实现显示或隐藏的。ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。当一个元素被ng-if
《我的Angular入坑记》——一个使用ng-show的demo
皮蛋瘦肉没有肉
04-21 2712
这个demo的大致思路是这样的：在登录之前会有一个 接受协议的单选框，只有你选择了，登录按钮才可以点击否则无效，还有一个可供查看协议内容的button，笔者的这个demo主要使用到的是ng-show和ng-disabled html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script
angularJs中的ng-show指令
泠泠似水
05-27 1276
单选框选定控制ng-show的显示和隐藏ng-show="status==0" //ng-show里可以写表达式，该表达式意思是：status值为0的时候，该区域显示。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head>
在新版本Angular8中show方法（老版本：ng-show）和hide方法（老版本：ng-hide）是如何使用的
陈哈哈的菜园子
12-05 6153
在老版本的Anguler或AngulerJS中我们通常的使用方法是： // 当role=x时，把td隐藏 <td ng-hide="data.role==1">管理员</td> // 当role=x时，把td显示 <td ng-show="data.role==1">管理员</td> <td ng-show="data.role=...
ng-class和ng-show的使用
weixin_39407291的博客
06-19 730
最近接受了一个项目，用的是angular1+版本，从来没接触过也只能硬着头皮上了，遇到的东西记录一下，回头遗忘了可以看看。 一. ng-class的用法：目前项目中我用到较简单的一种： 1.上代码： <ul class="nav nav-pills nav-justified whichType"> <li ng-click="clickState(1)" ***...
AngularJS的ng-show使用
qq_25775675的博客
05-20 651
<li class="third-menu" ng-repeat="thirdMenu in secondMenu.thirdMenus" ng-show="thirdMenuFilter(thirdMenu)"> <a id="thirdMenu{{thirdMenu.id}}" ng-click="clickThirdMenu(thirdMenu)">{{thirdMenu.name}}</a> </li> $scope.thirdMenuFilter
Angular.js中ng-if、ng-show和ng-hide的区别介绍
10-20
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
AngularJS改变元素显示状态
12-29
本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。 控制html元素显示和隐藏有n种方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天...
AngularJS实现表单元素值绑定操作示例
11-28
ng-hide:和ng-show的功能恰好相反 css内容： div.d1{ width: 20px; height: 20px; background-color: pink; } div.d2{ width: 20px; height: 20px; background-color: black; } HTML正文： <body ng-app...
angularJS学习之路（二十二）---模块加载---config
wust小吴
11-24 1万+
angularJS 模块可以在被加载和执行之前对其自身进行配置    作用就是：在应用的加载阶段应用不同的逻辑 我们知道 前面注册一个模块方法是： var app = angular.module("myApp", []);   这种方法带有两个参数，一个是模板名，一个是依赖注入列表，数组为空，表示当前注册的模板不需要依赖关系 这种方法注册的模板，angularJS机制会
angularJS学习之路（三十）---自定义指令---templateUrl
wust小吴
11-25 5722
第一种写法： {{title}} the content is :{{model.content}} 第二种写法是把html放在单独的html文件里面： {{title}} var app = angular.
angularJS学习之路（二十九）---控制器的别名使用 和它的作用域的确定
wust小吴
11-24 1490
Open var app = angular.module('myApp',[]); app.controller("RoomController",function () { this.openDoor = function () { alert("open the door !"); } });
angularJS学习之路（二十三）---创建服务的五大方法---factory
wust小吴
11-24 1235
factory（）方法： 是创建 和配置服务的最 快捷的方式 factory（）函数可以接受两个参数： name 字符串 ：需要注册的服务名 函数function：函数会在angularJS创建服务的实例时被调用，返回对象 angular机制出于内存占用和性能的考虑， 控制器只会在需要的时候被   实例化，不需要的时候就会被销毁 服务需
angularJS学习之路（二十一）---injector---初探依赖注入
wust小吴
11-24 994
首先看看injector 怎么用  js代码： var app = angular.module("myApp",[]); app.factory("game",function(){ return { title:"StarCraft" } }); //创建一个injector 参数为绑定的模板 会返回一个injector对象 //通过返回的对象你可以调用模板里面的各种服务 an
angularJS学习之路（十二）---｛｛｝｝发生屏幕闪烁问题
wust小吴
11-23 933
在屏幕可视的区域内使用 ｛｛｝｝会导致页面加载时未渲染的元素发生闪烁，用ng-bind 可以避免这个问题 解决办法二：使用  ng-cloak   指令 来避免 FOUC     ng-bind-template 用来在视图中绑定多个表达式
angularJS学习之路（二十四）---创建服务的五大方法---service
wust小吴
11-24 904
service（） 这个方法，可以允许我们为服务对象注册一个构造函数 接受两个参数： name 字符串，要注册的服务的名称 constructor()函数：构造函数，我们调用它来实例化服务对象 service（）函数会在创建实例时通过  new关键字来实例化服务对象 举个例子， var Person = function($http){
angularJS学习之路（十九）---自定义指令关于独立作用域
wust小吴
11-23 891
1.首先关于  scope：{} 和scope：true 效果是一样的 Surrounding scope: {{ myProperty }} Inside an directive with inherited scope: {{ myProperty }} Inside myDirective, isolate
angularJS学习之路（一）---开始入门
wust小吴
11-22 890
在输入框中输入： 姓名： {{name}}
ng-if contains
最新发布
07-28
- *1* *2* *3* [（四下）ng-class指令，ng-style指令，ng-show/ng-hide指令，ng-if指令等....](https://blog.csdn.net/action_xing/article/details/52447396)[target="_blank" data-report-click={"spm":"1018.2226...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值