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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
我的论坛源代码(一)
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
大二自我鉴定
2014/01/31 职场文书
《掌声》教学反思
2014/02/23 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
书香校园建设方案
2014/05/02 职场文书
2014年管理工作总结
2014/11/22 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
同学聚会开幕词
2019/04/02 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android