ng-if和ng-show的区别
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
<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>
ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。
<div ng-if="2+2===5">
Won't see this DOM node, not even in the source code
</div>
<div ng-if="2+2===4">
Hi, I do exist
</div>
<html ng-app>
<head>
<script src="angular-1.2.25.js"></script>
<script>
function myController($scope)
{
$scope.keyworld = "";
}
</script>
</head>
<body ng-controller="myController">
<input type="text" ng-model="keyworld">
<input type="button" value="clear" ng-click="keyworld=''" ng-show="keyworld !='' ">
</body>
这段代码默认情况下clear按钮不显示；当在text中输入内容时，clear按钮会显示；点击clear按钮时，会清空text中的内容，同时隐藏clear按钮。可以看到使用ng-show和ng-hide功能完全正常。如果将ng-show改成ng-if，点击clear按钮的时候，不能清空text中的内容，也不能隐藏clear按钮。这是因为ng-if会新建或者销毁作用域，很类似于javascript的原型继承。
ng-if和ng-show的区别的更多相关文章
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
- Part 14 ng hide and ng show in AngularJS
ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- How to Pronounce the Letters NG – No Hard G
How to Pronounce the Letters NG – No Hard G Share Tweet Share Most of the time when you see the lett ...
- angular2 ng build --prod 报错：Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...
- ng 构建
1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...
- Flume NG高可用集群搭建详解
.Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...
- FLUME NG的基本架构
Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...
随机推荐
- 读《疯狂Ajax讲义》重点
1.XMLHttpRequest() 请求的写法(p62) 一个类XMLHttp 因该包含的接口:[1] XMLHttp.sendRequest("POST",URL,data, ...
- java中的native关键字
参照下面的链接http://blog.163.com/yueyemaitian@126/blog/static/21475796200701491621267/
- jQuery模板插件jsrender
前几天学习jqm+phonegap,用到了一个jquery插件jsrender,(由于app不能用asp.net的服务端控件了,所以我也是醉了...),用于循环展示一下数据. 下面是我用到的几个简单用 ...
- ssh整合web.xml过滤器和监听器的配置 .
延迟加载过滤器 Hibernate 允许对关联对象.属性进行延迟加载,但是必须保证延迟加载的操作限于同一个 Hibernate Session 范围之内进行.如果 Service 层返回一个启用了延迟 ...
- 淘管 ERP项目与淘宝对接中产生的若干问题及处理办法
现象:ERP绑定淘宝后,下载商品数据时如果成功,ajax不断尝试重发. 原因: /app/taoapi/lib/top/TopClient.php 中的curl()方法成功后,返回空值,而前端收到空 ...
- javascript获取页面文档内容
<html> <head> <title>JavaScript基础</title> </head> <body> <p&g ...
- C#基础之------控制台进程
/********************************************************************************* File:C#实现100以内两个数 ...
- wordpress教程之在非single.php页面调用文章的信息
使用Wordpress的朋友可能遇到这样的问题,在非single.php页面中我们有时候想要调用当前文章的标题.内容等信息,而Wordpress在生成文章页的时候在各个页面中唯一不变的只有当前的文章I ...
- C# DateTime类，TimeSpan类
DateTime类是.Net中用于处理时间类型数据的. 一.字段 MaxValue 表示 DateTime 的最大可能值.此字段为只读. MinValue 表示 DateTime 的最小可能值 ...
- Silverlight 结合ArcGis 在地图画面上显示名称+ 点选图层事件委派
原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/10/72083.aspx 如下图,我希望我的滑鼠经过此标记的点时显示名称 其实简单 ...