ng-show和ng-if的区别和使用场景
一、ng-show(ng-hide)和ng-if都是控制标签的显示和隐藏,为什么angularjs会定义两个指令来供我们使用呢,不多多说肯定有各自的使用场景,接下来我们看哈实际原理:
ng-show实质性就是控制标签的显示和隐藏,内部是display: none;
ng-if则是移除标签和插入标签:;
二、实际比较
定义三个div
<div ng-show="true">我是显示</div>
<div ng-show="">我是隐藏</div>
<div ng-if="">我是移除</div>
看浏览器显示效果
我们看到ng-show的连个div的元素还是存在,只是样式的display被分别设置为block和none,而ng-if的标签已经被移除。
三、实际场景选择
3.1.场景一
ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被jQuery修改过(例如用.addClass),那么当ng-if的表达式值为false时,这个DOM元素会被移除,表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM,此时这些元素的状态会是它们的原始状态,而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。而ng-show和ng-hide则可以保留dom元素上次修改后的状态。
3.2.场景二
当我们使用ng-bind-html时候变量内容过多,此时我们需要控制显示或隐藏标签,此时你用ng-if会不断的操作dom,你会发现显示的速度非常慢。
总结:当不停操作标签且内容较少时候,并且不存在动态操作标签样式时候。运用ng-show和ng-if都可以;当不停操作标签且内容较少时候,并且存在动态操作标签样式时候。运用ng-show;当标签只使用一次就没得作用建议使用ng-if,减少加载。
ng-show和ng-if的区别和使用场景的更多相关文章
- list set map区别及适用场景
list与Set.Map区别及适用场景 1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重 ...
- session,cookie,sessionStorage,localStorage的区别及应用场景
session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...
- Java内存的 静态方法和实例方法的区别及使用场景
注意:变量指基本数据类型非对象,局部变量不能被静态修饰 1.(静态)成员变量存放在data segment区(数据区),字符串常量也存放在该区 2.非静态变量,new出来的对象存放在堆内存,所有局部变 ...
- 【转】ArrayList与LinkedList的区别和适用场景
ArrayList 优点:ArrayList是实现了基于动态数组的数据结构,因为地址连续,一旦数据存储好了,查询操作效率会比较高(在内存里是连着放的). 缺点:因为地址连续,当要插入和删除时,Arra ...
- 转载>>C# Invoke和BeginInvoke区别和使用场景
转载>>C# Invoke和BeginInvoke区别和使用场景 一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程 ...
- java 常用集合list与Set、Map区别及适用场景总结
转载请备注出自于:http://blog.csdn.net/qq_22118507/article/details/51576319 list与Set.Map区别及 ...
- hibernate与mybatis的区别和应用场景
mybatis 与 hibernate 的区别和应用场景(转) 1 Hibernate : 标准的ORM(对象关系映射) 框架: 不要用写sql, sql 自动语句生成: 使用Hibernate ...
- mybatis由浅入深day01_ 4.11总结(parameterType_resultType_#{}和${}_selectOne和selectList_mybatis和hibernate本质区别和应用场景)
4.11 总结 4.11.1 parameterType 在映射文件中通过parameterType指定输入参数的类型.mybatis通过ognl从输入对象中获取参数值拼接在sql中. 4.11.2 ...
- 为什么要使用索引?-Innodb与Myisam引擎的区别与应用场景
Innodb与Myisam引擎的区别与应用场景 http://www.cnblogs.com/changna1314/p/6878900.html https://www.cnblogs.com/ho ...
- JAVA基础之——String、StringBuilder、StringBuffer区别和使用场景
本文主要讲解String.StringBuilder.StringBuffer区别和应用场景 本文以jdk1.8为例 1 String 操作过程:每次赋值时新建一个String对象. 2 String ...
随机推荐
- webpack(一) 安装使用
(一)webpack的安装 webpack是基于node.js,因此需要安装node.js. 安装好node.js 后,全局安装webpack,命令如下 npm install webpack -g ...
- 我的第一个博客——Fragment遇到的问题
最近项目中使用fragment时遇到了一些问题: 1.fragment的刷新问题. 解决:我的情况是有多个fragment时,只需要刷新其中几个界面.之前我在网上看到的一些方法.如下: 首先在Adap ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- jquery Jquery 遍历 获取设置 效果
speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...
- python is 和 == 和=
Python中有很多运算符,今天我们就来讲讲is和==两种运算符在应用上的本质区别是什么. 在讲is和==这两种运算符区别之前,首先要知道Python中对象包含的三个基本要素,分别是:id(身份标识) ...
- Navicat连接MySQL,出现2059 - authentication plugin 'caching_sha2_password'的解决方案
昨天当我把MySQL的安装程序下载并安装好,然后又下载了另外一个工具来使用它,该工具的名称是Navicat Premium,当我通过该工具连接MySQL Workbench的时候,无法连接,提示“20 ...
- maven项目打包发布到私有仓库
在项目开发中通常会引用其他的jar,怎样把自己的项目做为一个jar包的形式发布到私服仓库中,主要有以下三个步骤 (怎样配置maven私服仓库,就不再这里说明了,可以参考以前的文章)1.在maven的s ...
- c# 对list 操作的写法总结
1:统计list 内重复值的数量 List<, , , , , , , }; var g = list.GroupBy(i => i); foreach (var item in g) { ...
- XHR的对象及用法
function createXHR(){ //检测原生XHR对象是否存在,如果存在刚返回它的新实例: //如果不存在,则检测ActiveX对象; //如果两个都不存 ...
- 肤色检测一例-使用rgb颜色模型
代码: /* 输入:rgb图像 输出:与输入图像尺寸相同的灰度图,若rgb图中某像素检测为肤色,则灰度图中对应像素为255,否则为0 */ void SkinRGB( Mat &rgb,Mat ...