ng-ifng show与ng hide-show,ng-hide指令的区别和注意事项

ng-hide/ng-show属性用来控制页面内元素的显示或隐藏。
ng-hide条件为true时,隐藏所在元素;false,则显示所在元素。
ng-show正好相反。true时,显示所在元素;false,则隐藏所在元素。
&!-- when $scope.myValue is truthy (element is visible) --&
class="ng-hide" ng-show="myValue"&&/div&
&!-- when $scope.myValue is truthy (element is hidden) --&
&div ng-hide="myValue"&&/div&
class="ng-hide" 可以不写,官方文档也没要求,但会引起页面初始显示的问题,后面详解。
ng-hide条件为true时,向所在元素的class中添加"ng-hide" 进行元素的隐藏;为false时,将"ng-hide"从class中移除,从而使隐藏的元素显示。
ng-show正好相反。条件为false时,向当前元素的class中添加"ng-hide"进行元素的隐藏;为true时,将"ng-hide"从class中移除,从而使隐藏的元素显示。
ngshow的核心代码:
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
# 元素不随着指定的值进行显示或隐藏
&div ng-show="{{myValue}}" class="ng-hide"&&/div&
上述代码中ng-show 绑定的是{{}}表达式的值对应的字符串,而不是myValue。布尔型对应的是"" 空串 或者 "true" 。所以,myValue值变化后,对于ng-show而言,监视的是固定的字符串,没有变化。也就不会触发页面元素的显示或隐藏事件。
# 页面初始化显示混乱、闪烁的问题
由于页面初始化,先处理html显示,然后是angular js的处理后的显示,所以js运行前,所有ng-show控制不显示的内容,在页面初始化中先显示,js运行后才隐藏。这个闪烁感主要取决于浏览器处理的速度(当然也依赖人的视觉系统,编码能搞定这事就牛X了)。这个现象在手机上会明显一些。
简单的解决方案,在用到ng-show的元素里添加ng-hide class。
class="ng-hide" ng-show="myValue"&&/div&
还有就是用ng-cloak来处理,原理一样。
阅读(...) 评论()博主最新文章
博主热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)最近在做一个项目改版,第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的,感觉非常的新鲜。有几个指令是经常用到的,这里由于这几个有点共性,所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令。
这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法,使用起来非常方便,尤其是做业务逻辑。
都是通过一个表达式的值来实现切换显示的,只不过 ng-switch 可以是其他值,ng-if ng-show 就必须是 boolen了。
我在使用过程中发现一个小技巧,我们通过表达式设置 ng-if 或者 ng-show 直接在页面中定义一个表达式,这个时候它的值其实是undefined,由于 !== true 所以这部分默认也是隐藏。
那么既然是不同指令,就各自有专攻,那我们就来看看他们分别都有什么果实能力。。。(不看海贼的可以无视哈~~)
各自的果实能力
ng-show/ng-hide
在用原生js 或者 jquery的时候,我们一般都可以定义一个类,通过添加和删除这个类来实现元素的显示和隐藏切换。其实这部分从网上参考资料来看,Angular也是这样实现的,根据表达式正确与否,动态添加或者删除 ng-hide 这个Angualr预先定义好的class。调用方式具体如下:
可以是设置一个变量
&div ng-show='show'&&/div&
也可以是直接使用 true / false
&div ng-show='true'&&/div&
对于变量,我们在js 中直接设置这个值就可以。
这个指令的特性是,即使我们暂时隐藏这部分内容,它也会被dom 渲染。
使用方式也是设置一个表达式:
可以是设置一个变量
&div ng-if='more'&&/div&
也可以是直接使用 true / false
&div ng-if='true'&&/div&
对于变量,我们在js 中直接设置这个值就可以。
这是一个能帮我们节省效率的指令,如果表达式值 === false , 则这部分不会在dom中渲染,或者原有的内容会被从dom中删除。所以如果有一部分内容,不需要一开始就显示,我们可以先用ng-if 让它隐藏。例如一个显示更多的下拉按钮,刚开始不显示的部分,可以ng-if 来设置,等我们点击了更多按钮,再设置ng-if = true 既可。这样子减少了页面渲染事件,提高了效率呢。
还有一个特性,ng-if 或创建自己的 scope,它通过原型继承父级的scope。一个典型的例子来自于参考资源1。
还有一个小坑,$scope上面我可以直接给一个属性赋值如:
$scope.showpage = 'abut'
但是如果直接赋值一个对象,对不起,需要先声明,再给对象添加属性
$scope.data = {};
$scope.data.showpage = 'about';
使用方式比前前两个复杂一点,不过也非常直观,类似原生js 中的switch 函数:
在外层父级元素设置 ng-switch 为一个表达式A ,那么他的子元素相当于几个不同的选项,表达式A 对应哪个子元素的 ng-switch-with 值,就显示那部分。
&div ng-switch='showpart'&
&div ng-switch-default&&/div&
&div ng-switch-with='home'&&/div&
&div ng-switch-with='blog'&&/div&
&div ng-switch-with='about'&&/div&
&div ng-switch-with='contact'&&/div&
这也是一个能帮我们节省效率的指令。和ng-if 一样,一开始如果不等于父级的 ng-switch 表达式的值,则不会在页面渲染的,而且我们也可以通过 ng-switch-default 来设置默认的显示部分。比如以往常见的 Tab 选项卡,用这个指令实现起来就非常的容易。
这里有一点疑问,因为我在项目中,做的单页面应用,所有不同部分都在一个页面里面。那么我经常需要根据不同的ajax返回值,显示不同的部分,(特殊原因不能使用路由),所以我这里就是用的 ng-switch 指令,根据不同返回值,显示不同部分。虽然也能实现按需显示,但看到有文章说这样使用 ng-switch 并不是很妥当,路过的朋友,有了解的可以指点我一下!我在这先谢过了~~
后面我会继续分享Angular在项目开发中的经验,以及遇到的坑!
参考资料中回答的非常精彩,也有实例,有兴趣也可以看下!
阅读(...) 评论()Angular.js中ng-if,ng-show和ng-hide的区别介绍_百度知道
Angular.js中ng-if,ng-show和ng-hide的区别介绍
我有更好的答案
ng-hideshow。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏、ng-if指令都可以用来控制dom元素的显示或隐藏,值为true时元素会显示。ng-hide功能类似,使用方式相反
采纳率:94%
来自团队:
为您推荐:
其他类似问题
换一换
回答问题,赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。

我要回帖

更多关于 ng if与ng show的区别 的文章

 

随机推荐