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

最新推荐文章于 2020-06-26 09:09:50 发布
最新推荐文章于 2020-06-26 09:09:50 发布
阅读量767 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zpz_326/article/details/73526960
版权

本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下

前言

大家都知道在使用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则不会。

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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

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

页面最终的HTML片断如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
< 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使用过程中，有时候需要根据一些条件来隐藏掉一些按钮，当隐藏第一个或最后一个按钮时，会出现一些小问题。

代码：

?
1
2
3
4
5
6
7
8
9
< 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 >

效果如图：

我们发现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元素从页面中删除了。

效果如图：

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

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

总结

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


zpz_326
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ng-if与ng-show、ng-hide指令的区别
奇妙的博客
09-25 1054
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。     ng-if指令...
(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
热门推荐
aty
03-30 7万+
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide是通过改变CSS的display属性值来实现显示或隐藏的。ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。当一个元素被ng-if
angularjs ng-if ng-show ng-hide区别
兰亭古墨
07-15 1312
ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏，对应的DOM元素会一直存在于当前页面中，而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。如果赋值表达式的值为false，那么这个元素就会从页面中删除，否则会添加一个元素。ng-if创建元素时用的是被它编译后的代码，如果ng-if内部的代码被其它方式修改过，那么修改只会对本次展现有效，页面元素重新渲染后修改效果会消失，而ng-sh
ng-show/ng-hide
光英的记忆博客
04-10 480
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏。 元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的。.ng-hide类被预先定义在了AngularJS的CSS文件中,并且它的display属性的值为none(用了!importan
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
12-10
本文将详细介绍三个常用的Angular指令：ng-if、ng-show/ng-hide以及ng-switch，它们都是用来处理页面内容显示和隐藏的。 1. ng-if： ng-if指令根据指定表达式的值来决定是否在DOM中渲染对应的元素。如果表达式结果...
Angular.JS中指令ng-if的注意事项小结
12-10
ng-if同ng-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。 当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从...
ng-if，ng-show，ng-hide的区别
_古井心
06-08 1300
ng-if 控制元素是否存在， ng-show，ng-hide 控制元素是否展示。ng-show=“true” 等价于ng-hide=“false” 存在是展示的前提。 用一个例子说明区别： 当页面表单中存在如下一个表单元素， 该input带有required属性，在表单提交前会校验。 如果给该元素加上ng-show="false" （ng-hide="tr
angular.js里的ng-show，ng-hide与ng-if的区别
lovelyzyh的博客
07-23 1139
1、ng-show，ng-hide与ng-if最本质的区别是：ng-show，ng-hide是通过CSS样式显示或隐藏DOM节点，而ng-if是新增或删除节点。 2、ng-show，ng-hide不会从DOM中删除元素。 3、ng-if的值为false时，元素就会从DOM中删除，点击处理程序也不会工作；值为true时，显示该元素，并且重新附加处理程序。 4、ng-if创建一个子范围，而ng-
ng-show和ng-if的区别和使用场景
weixin_30381317的博客
10-11 777
一、ng-show（ng-hide）和ng-if都是控制标签的显示和隐藏，为什么angularjs会定义两个指令来供我们使用呢，不多多说肯定有各自的使用场景，接下来我们看哈实际原理： ng-show实质性就是控制标签的显示和隐藏，内部是display: none； ng-if则是移除标签和插入标签：； 二、实际比较 定义三个div <div ng-show="true">我...
ng-show和ng-if的区别
冷月心的博客
04-03 7050
ng-show和ng-if的区别简单比较代码代码解释 简单比较 共同点： 都是判断性的指令，里边可以是简单的表达式，返回结果是布尔类型的值 不同点： ng-show是css层面的元素显示与隐藏，不会引发浏览器的回流，仅仅是视图的重绘； 相反的，ng-if是dom层面的上下树，不仅仅是视图的重绘，还会引发浏览器的回流，所以会重新实例化控制器 代码 <!DOCTYPE html> &l...
ng-show ng-hide ng-if的区别
weixin_30449453的博客
07-17 109
用途 ng-show ng-hide ng-if三个都可以用来控制页面DOM元素的显示与隐藏。 ng-hide条件为true时，隐藏所在元素，false时显示所在元素。 ng-show相反，条件为true时，显示所在元素，false时隐藏所在元素。 ng-if 根据表达式的值动态的在当前页面中添加删除页面元素，如果表达式的值为flase，那么这个元素就会从页面中删除，否则会添加一个元素。 工作...
ng-show 与ng-if的区别
01-24 63
http://m.blog.csdn.net/article/details?id=44701769 http://www.cnblogs.com/iceseal/p/4077417.html 转载于:https://www.cnblogs.com/coding4/p/6347097.html
前端学习（1562）：ng-hide，ng-show
歌谣的博客
06-26 240
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ng-app指令</title> <style> .red { ...
AngularJS 中ng-show，ng-hide
ting119的博客
01-04 1535
1. ng-show 的主要用法就是表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素，为了验证它的功能，我们写一个小例子：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular
Angular权威指南：ng-book 2英文版，深度解析Angular 4
"'[angular2权威教程英文版]ng-book 2: The Complete Book on Angular 4, r58.2017.3.pdf' 是一本由Nate Murray、Felipe Coury、Ari Lerner和Carlos Taborda共同编写的关于Angular 4的全面指南。该书由Fullstack.io...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值