Angular.js中ng-if、ng-show和ng-hide的区别介绍


Posted in Javascript onJanuary 20, 2017

前言

大家都知道在使用anularjs开发前端页面时,常常使用ng-show、ng-hide、ng-if功能来控制页面元素的显示或隐藏,那他们之间有什么不同呢?下面通过这篇文章来一起看看吧。

实现原理

ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏,对应的DOM元素会一直存在于当前页面中,而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。如果赋值表达式的值为false,那么这个元素就会从页面中删除,否则会添加一个元素。ng-if创建元素时用的是被它编译后的代码,如果ng-if内部的代码被其它方式修改过,那么修改只会对本次展现有效,页面元素重新渲染后修改效果会消失,而ng-show/ng-hide则能够保留dom元素上次修改后的状态。

在作用域方面,两者也存在差异:当一个元素被ng-if从DOM中删除时,与其关联的作用域也会被销毁。而且当它重新加入DOM中时,则会生成一个新的作用域,而ng-show和ng-hide则不会。

通过如下代码并结合浏览器开发者工具可以清楚的看出二者之间的不同:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>ng-if ng-show ng-hide</title>
 <script type="text/javascript" class="library" src="http://libs.useso.com/js/angular.js/1.2.9/angular.min.js"></script>
 </head>
<body>
 <div ng-controller="MainCtrl">
  <div ng-show="false">
   ng-show = false 
  </div>
  <div ng-show="true">
  ng-show=true 
  </div>
  <div ng-if="true">
  ng-if = true
  </div>
  <div ng-if="false">
  ng-if = false
  </div>
 </div>
 </body>
</html>

js

angular.module("app",[]).controller("MainCtrl",function($scope){
});

页面最终的HTML片断如下:

<div ng-controller="MainCtrl" class="ng-scope">
 <div ng-show="false" class="ng-hide">
 ng-show = false 
 </div>
 <div ng-show="true" class="">
 ng-show=true 
 </div>
 <!-- ngIf: true --><div ng-if="true" class="ng-scope">
 ng-if = true
 </div><!-- end ngIf: true -->
 <!-- ngIf: false -->
</div>

由于ng-if/ng-hide(ng-show)在原理上有很大的差别,所以在某些情况下展示出来的效果有较大的差别。

正确使用ng-if和ng-show

在使用bootstrap中,我们会经常用到按钮组,也就是btn-group,如果仔细观察的话,会发现一个按钮组的第一个和最后一个按钮分别是有圆角的,如下图:

Angular.js中ng-if、ng-show和ng-hide的区别介绍

但是中间的按钮是没有圆角的,这样显得比较美观。

在结合angular使用过程中,有时候需要根据一些条件来隐藏掉一些按钮,当隐藏第一个或最后一个按钮时,会出现一些小问题。

代码:

<div class="row" ng-controller='myCtrl'>
  <div class="col-lg-offset-1">
  <div class="btn-group">
   <button class='btn btn-primary'>button1</button>
   <button class='btn btn-primary'>button2</button>
   <button class='btn btn-primary' ng-show='false'>button3</button>
  </div>
  </div>
 </div>

效果如图:

Angular.js中ng-if、ng-show和ng-hide的区别介绍

我们发现button2的圆角不见了,这和我们预期的效果不一致。

问题是由ng-show引起的,而我们知道ng-show只是改变元素的display属性,所以我们把这个ng-show='false'改成 style='display:none' 的话也会有这个圆角消失的效果。

那么我们应该怎么做,才会让它显示圆角呢?

如果我们想要达到显示圆角的效果,那么我们应该用ng-if ,只需要将代码中的ng-show='false' 改成ng-if='false' 即可。

原因是:ng-if会根据表达式的值来决定当前这个DOM元素的创建与销毁。当表达式为返回true时,创建,反之,则销毁。销毁就意味着这个DOM元素从页面中删除了。

效果如图:

Angular.js中ng-if、ng-show和ng-hide的区别介绍

圆角显示了,证明button3已经从页面中删除了。

再进一步,我们打开开发者工具也可以发现这个DOM元素确实已经不存在了:

Angular.js中ng-if、ng-show和ng-hide的区别介绍

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript中的isNaN函数使用说明
Nov 10 Javascript
javascript数组的使用
Mar 28 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
js+css3实现旋转效果
Jan 20 #Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 #Javascript
浅谈angularjs $http提交数据探索
Jan 20 #Javascript
原生js实现无限循环轮播图效果
Jan 20 #Javascript
原生js实现弹出层效果
Jan 20 #Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 #Javascript
You might like
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
wxpython实现图书管理系统
2018/03/12 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
自荐信怎么写好
2013/11/11 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
承办会议欢迎词
2014/01/17 职场文书
作风年建设汇报材料
2014/08/14 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
python如何在word中存储本地图片
2021/04/07 Python