第一点区别是， 
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. Python subprocess- call、check_call、check_output

    简介 subprocess模块用来创建新的进程,连接到其stdin.stdout.stderr管道并获取它们的返回码.subprocess模块的出现是为了替代如下旧模块及函数:os.system.os ...

  2. Isolate randomforest检测异常点的非监督方法

    由于异常数据的两个特征(少且不同: few and different) 异常数据只占很少量; 异常数据特征值和正常数据差别很大. iTree的构成过程如下: l  随机选择一个属性Attr: l  ...

  3. Java基础82 jsp中的EL表达式（网页知识）

    1.EL表达式的作用 EL表达式的作用:向浏览器输出域对象中的变量值或者表达式计算结果.语法:${变量或者表达式} 注: Jsp的核心语法:jsp的表达式<%= %>和jsp的脚本< ...

  4. 10 个优质的 Laravel 扩展推荐

    这里有 10+ 个用来搭建 Laravel 应用的包 为何会创建这个包的列表?因为我是一个「比较懒」的开发者,在脸书上是多个 Laravel 小组的成员.平日遇到最多的问题就是开发是需要用那些包.我很 ...

  5. Bechmarksql

    使用方法 1.配置JDK环境 JDK最好是1.5以上的版本 JAVA_HOME=/usr/java/jdk1.6.0_22 PATH=$PATH:$JAVA_HOME/bin 2.准备工作 把要测试的 ...

  6. （转）python的range()函数用法

    使用python的人都知道range()函数很方便,今天再用到他的时候发现了很多以前看到过但是忘记的细节.这里记录一下range(),复习下list的slide,最后分析一个好玩儿的冒泡程序. 转自: ...

  7. 2016-2017 ACM-ICPC Pacific Northwest Regional Contest (Div. 2) 题解

    [题目链接] A - Alphabet 最长公共子序列.保留最长公共子序列,剩余的删除或者补足即可. #include <bits/stdc++.h> using namespace st ...

  8. 一个将PDF转word、图片、PPT的在线工具

    smallpdf 真的超级棒! https://smallpdf.com/cn

  9. 使用Retrofit2调用HTTP API

    前言 Retrofit会将你的HTTP接口调用转换为java的interface,你不必去实现这个接口,交给Retrofit来创建动态代理. 首先,贴上官网和Javadoc. 官网上的例子 加依赖,下 ...

  10. 深度学习基础系列（七）| Batch Normalization

    Batch Normalization(批量标准化,简称BN)是近些年来深度学习优化中一个重要的手段.BN能带来如下优点: 加速训练过程: 可以使用较大的学习率: 允许在深层网络中使用sigmoid这 ...