第一点区别是， 
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. urllib2使用初探

    在入门urllib2之前,我想应该先调研一下urllib与urllib2的区别[1].首先我们要明白的是,这两个模块不可以相互替代.两者都是接受URL请求的模块,但是提供了不同的功能,两个显著的区别是 ...

  2. python_Appium测试环境搭建

    Android环境搭建 移动端Appium环境部署比Web的selenium环境稍微复杂一些,如用python编写测试用例脚本或者开发测试框架以及UI自动化操作方法是一样的,基本是通用.因两者都是基于 ...

  3. 文件下载功能django+js

    1. 功能叙述 前端web页面通过访问url+id的形式访问url lottery/draw/(?P<pk>(\d+))/download/ 后端代码通过orm查询pk相关数据 过滤出自己 ...

  4. 使用T-SQL导入多个文件数据到SQL Server中

    在我们的工作中,经常需要连续输入多个文件的数据到SQL Server的表中,有时需要从相同或者不同的目录中,同时将文件中的数据倒入.在这篇文章中,我们将讨论如何同时把一个目录中的文件的数据倒入到SQL ...

  5. Rookey.Frame之实体类

    上周跟大家分享了Rookey.Frame框架的初始化功能,今天继续给大家介绍实体类的设计. 先看下下面菜单实体示例代码: using Rookey.Frame.EntityBase; using Ro ...

  6. 【LOJ】#2447. 「NOI2011」兔兔与蛋蛋的游戏

    题解 对于75分来说,操作肯定不会成环,可以暴搜 看成空格在移动,空格移动到原来的位置肯定经历了偶数个格子,但是操作的人是两个不同的人,所以肯定不会成环 对于满分做法,要找到一种更好的方式判先手是否会 ...

  7. HDU - 4474 bfs好题

    这个BFS并不是很好想.. 最主要的一点是每个余数只会被拿出来一次更新其他余数, 然后我用d[ i ]表示 到达 i 这个余数最短需要多长,然后从高位往低位贪心,判断成立的时候忘记了如果0被ban掉了 ...

  8. CentOS7多实例安装mysq5.6二进制版本

    1丶下载mysql,解压,创建用户,创建软链接 test -d /tools || mkdir /tools ;cd /tools wget http://mirrors.sohu.com/mysql ...

  9. 移动端自动化测试（二）之 Appium常用的API（python）函数介绍

    上一章节已经介绍了Appium的环境搭建,其实只要掌握了Appium的工作原理,前期的准备工作和安装过程是比较简单的.那么当我们搭建好Appium环境后接下来做些什么呢?通常思路是开始appium的第 ...

  10. 【记录】HTTP协议状态码含义

    状态码200-299之间的状态码表示成功300-399之间的代码表示资源已经被移走400-499之间的代码表示客户端的请求出错500-599之间的代码表示服务器出错了