第一点区别是， 
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的区别的更多相关文章

  1. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  2. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

  3. 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 ...

  4. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  5. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  6. 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 ...

  7. 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 ...

  8. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  9. Flume NG高可用集群搭建详解

    .Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...

  10. FLUME NG的基本架构

    Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...

随机推荐

  1. SQLAlchemy-方言(Dialects)

    一: Dialects 文档是分为三个部分: SQLAlchemy ORM, SQLAlchemy Core, and Dialects. SQLAlchemy ORM:在SQLAlchemy ORM ...

  2. python基础-类的反射

    1)反射是通过字符串方式映射内存中的对象. python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr, 改四个函数分别用于对对象内部执行:检查是 ...

  3. C语言基础 - read()函数读取文本字节导致判断失误的问题

    工作了几个月,闲着没事又拿起了经典的C程序设计看了起来,看到字符计数一节时想到用read()去读文本作为字符输入,一切OK,直到行计数时问题出现 了,字符总计数没有问题,可行计算就是进行不了,思考了半 ...

  4. CF401D 【Roman and Numbers】

    题意将n(n<=10^18)的各位数字重新排列(不允许有前导零)  求  可以构造几个mod m等于0的数字解法状压f[S][k] 表示选用的位数集合为S,mod m 为k的方案数注意不能有前导 ...

  5. CF GYM100548 （相邻格子颜色不同的方案数 2014西安现场赛F题 容斥原理）

    n个格子排成一行,有m种颜色,问用恰好k种颜色进行染色,使得相邻格子颜色不同的方案数. integers n, m, k (1 ≤n, m ≤ 10^9, 1 ≤ k ≤ 10^6, k ≤ n, m ...

  6. BZOJ囤题计划

    决定做一些题,学习jry,开坑(其实是填坑) 大概会刷的很慢,大家别鄙视我..欢迎鄙视 果然慢出翔了,还是填完吧.. 现在做了: 11 [2338][HNOI2011]数矩形 枚举对角线暴力水过,所有 ...

  7. bzoj 1264 [AHOI2006]基因匹配Match dp + 树状数组

    思路:好难想啊, 考虑到应该从每个数字只有5个数字下手, 但是不知道到底该怎么写.. 首先我们将第一个串按数字的种类分类, 每一类里面有5个, 然后将第二个串里面的数字一个一个加,如果一个加入的第 i ...

  8. JS日期、时间 格式化转换方法

    Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+& ...

  9. TradingView 自定义指标

    TradingView 支持自定义指标,不过是把你要定义的指标写成一个 JS 源文件(customIndex.js),放在图表库 static 文件夹下.自定义指标 JS 源代码模板如下: __cus ...

  10. freertos的钩子函数

    在main中添加: /** * @brief FreeRTOS 内存分配失败钩子函数 */ void vApplicationMallocFailedHook(void) { taskDISABLE_ ...