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，减少加载。

转载于:https://www.cnblogs.com/baryon/p/9611429.html

ng-show和ng-if的区别和使用场景相关推荐

ng serve 和 ng build 的区别
在这个文档里有介绍. 在开发过程中,你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建.监控和提供服务.但是,当你打算部署它时,就必须使用 ng bui ...
Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
hibernate与mybatis的区别和应用场景
mybatis 与 hibernate 的区别和应用场景(转) 1 Hibernate : 标准的ORM(对象关系映射) 框架: 不要用写sql, sql 自动语句生成: 使用Hibernate ...
数组和链表的区别以及应用场景
数组和链表的区别以及应用场景首先我们要先理解什么是数组和链表在计算机中要对给定的数据集进行若干处理,首要任务是把数据集的一部分(当数据量非常大时,可能只能一部分一部分地读取数据到内存中来处理)或全 ...
spring中基于Java容器配置注解的区别及使用场景
转载自百家号作者:有趣的代码 @Component.@Service.@Controller.@Repository:@Configuration.@Bean区别,使用场景从spring3.0开始, ...
php使用hset报错,redis中set和hset的区别和使用场景
下面由redis教程栏目给大家介绍redis中set和hset的区别和使用场景,希望对需要的朋友有所帮助! redis中存数据时,到底什么时候用 hset 相比于 set 存数据时又有什么不一样? s ...
python怎么接收udp报文_面试官：说说UDP和TCP的区别及应用场景
上一篇聊完一文彻底搞懂 TCP三次握手.四次挥手过程及原理这次聊聊TCP和UDP的区别和场景 TCP/IP 中有两个具有代表性的传输层协议,分别是 TCP 和 UDP.来看看传输层位于OSI七层协议 ...
java 常用集合list与Set、Map区别及适用场景总结
转载请备注出自于:http://blog.csdn.net/qq_22118507/article/details/51576319 list与Set.Map区别及适用场景 1.List,Set都 ...
Hive常见的存储格式的区别与应用场景
Hive常见的存储格式的区别与应用场景一.文件存储格式行存储和列存储 1.TextFile 2.sequencefile 3.RC 4.orc(工作中常用) 5.parquet 二.四种存储格式分 ...

ng-show和ng-if的区别和使用场景

ng-show和ng-if的区别和使用场景相关推荐

最新文章

热门文章