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 相关文章推荐
jQuery ready函数滥用分析
Feb 16 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
js中typeof的用法汇总
Dec 12 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
轻松理解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中批量修改文件后缀名的函数代码
2011/10/23 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
python通过zabbix api获取主机
2018/09/17 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
三个python爬虫项目实例代码
2019/12/28 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
你对IPv6了解程度
2016/02/09 面试题
2014年销售内勤工作总结
2014/12/01 职场文书
大学生村官入党自传
2015/06/26 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
入党申请书怎么写?
2019/06/21 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP