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插件之easing 动态菜单
Aug 21 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
react build 后打包发布总结
Aug 24 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
Python 异常处理实例详解
2014/03/12 Python
python单线程实现多个定时器示例
2014/03/30 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Django模板语言 Tags使用详解
2019/09/09 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
单位委托书
2014/10/15 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
高中美术教学反思
2016/02/17 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers