第一点区别是， 
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. 教你用DrawLayout 实现Android 侧滑菜单

    现在的APP越来越注重用户体验,百度视频客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示.类似的还有天天动听,人 ...

  2. 获取SQL Server的版本信息

    微软 SQL Server 版本号 产品名称 发行日期 主版本号 正式版 SP1 SP2 SP3 SP4 SQL Server 2016 2016.06.01 13.00.1601.5 13.00.1 ...

  3. Centos中查询目录中内容命名ls

    首先解释下这块, root代表当前登录用户,localhost代表主机名, ~代表当前主机目录,  #代表用户权限   #表示超级用户,$表示普通用户: 查询目录中内容命令 ls  (list缩写) ...

  4. JavaSE简单实现多线程聊天

    1.1 主程序入口 在主程序入口处,通过设置MyWindow的第一个参数,如果为true则为服务器,如果为false,则为客户端,当然也可以设置第二个参数,区分客户端和服务器的窗口标题. public ...

  5. Elasticsearch5.0 安装问题

    使用Elasticsearch5.0 必须安装jdk1.8 [elsearch@vm-mysteel-dc-search01 bin]$ java -version java version &quo ...

  6. C++中bool类型变量初值对程序的影响

    很困惑的一个问题 #include<iostream> using namespace std; int main() { //bool a=true; //非0(1,2,3,……)输出1 ...

  7. Hive（二）CentOS7.5安装Hive2.3.3

    一 Hive的下载 软件下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/hive/  这里下载的版本是:apache-hive-2.3.3-bin.t ...

  8. phpmyadmin新加用户登陆不了，测试解决方案。

    今天在给项目配置数据库管理平台时遇到一个问题,不论怎么添加mysql用户在登陆phpmyadmin时始终无法登陆,不管准不准许为空依然报出#1045 无法登陆服务器的错误,最后打开mysql库中use ...

  9. pip-django-cms

    pip install django-el_pagination pip install django-ckeditor

  10. babel使用中不想使用 严格模式 如何去除？

    使用babel进行es6转es5时,默认转化之后是严格模式,有些时候我们想去除严格模式. 解决方法如下 安装 babel-plugin-transform-remove-strict-mode 依赖 ...