ng-show和ng-if的区别
第一点区别是，
ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，
ng-show 是初始时就创建了，用display:block 和 display:none 来控制显示和不显示。
第二点区别是，
ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。
这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。
针对第二点，如果想传递给外层的model，则在ng-if的ng-model中加一个$parent即可，如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl">
“父级”环境
<input type="text" ng-model="parentVal"><br><br><br><br>
<div ng-if="parentVal == 'a'" style="border:1px solid #ccc;width:200px;height:200px;margin:20px">
"子"环境
<input type="text" ng-model="childVal"></br>
内层显示ng-if的model： {{childVal}}
</div> 在外层显示ng-if中的model： {{childVal}} </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { });
</script> </body>
</html>
参考网址：http://blog.csdn.net/sinat_31057219/article/details/60780479
ng-show和ng-if的区别的更多相关文章
- 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 功能 ...
随机推荐
- Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
在设置请求头的时候报这个Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPE ...
- Java代码优化总结
代码优化是一个很重要的课题.一般来说,代码优化的目标主要有两个,一个是减小代码的体积,另一个是提高代码运行的效率. 代码优化的细节有很多,此处列举部分: 1.尽量指定类.方法的final修饰符. 带有 ...
- 关于卫星RNSS与RDSS
名词解释:RNSS与RDSS 服务于用户位置确定的卫星无线电业务有两种.一种是卫星无线电导航业务,英文全称Radio Navigation Satellite System,缩写RNSS,由用户接收卫 ...
- Windows开机自动启动pageant,方便使用ssh链接到GitHub
按win +r,输入 shell:startup "C:\Program Files\TortoiseGit\bin\pageant.exe" "d:\GitHubPri ...
- MySQL下concat函数中null值问题
在mysql中,使用CONCAT(str1,str2,...)函数拼接字符串的过程中,如果你拼接的字段当中有值为null,那么拼接的结果就为null 注: select CONCAT(字段1,字段2) ...
- VMware虚拟机Mac OS X无法调整扩展硬盘大小的解决方案
使用VMware虚拟机搭建的MacOSX,在10.10以上可能会出现无法扩充磁盘大小的问题. 因为很多朋友在初次安装MacOSX的时候都默认选择40G的磁盘大小,结果用了没两天之后就发现磁盘不够用了. ...
- RabbitMQ系列之RabbitMQ集群
本文的集群是RabbitMq 自身的Cluster搭建 . #hosts准备: vim /etc/hosts #172.16.3.79 s1 #172.16.3.105 s2 172.16.2.10 ...
- LoadRunner参数化取值与连接数据库
LoadRunner参数化取值与连接数据库 LoadRunner在使用参数化的时候,通常都是需要准备大数据量的,也因此LoadRunner提供两种参数化取值方式,一种是手动编辑,另一种就是通过连接 ...
- bzoj 1820 dp
最普通dp要4维,因为肯定有一个在上一个的位置,所以可以变为3维,然后滚动数组优化一下. #include<bits/stdc++.h> #define LL long long #def ...
- Git 简史
同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代.Linux 内核开源项目有着为数众广的参与者.绝大多数的 Linux 内核维护工作都花在了提交补丁和保存归档的繁琐事务上(1991 ...