ITPub博客

首页 > IT职业 > IT职场 > Angularjs基础知识之ng-show和ng-hide

Angularjs基础知识之ng-show和ng-hide

IT职场 作者:CNNBULL 时间:2021-09-09 09:12:10 0 删除 编辑

ng-show和ng-hide

ng-Show 和ng-Hide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时,更方便的操作元素的显示与隐藏,而不必使用css或者js操作元素的显示与隐藏,这些交给angularjs来实现就可以了。我们只需要做的就是为ng-show和ng-hide指定显示或者隐藏的条件就可以了。

一个例子

控制元素的显示与隐藏,可以通过三种方式来实现,分别是:布尔值,表达式,函数。

布尔值




   show-hide
   
   
   
   

       
this is a div which is show

       
this is a div which is hide

       
   


图片描述

上面的例子,为ng-show指定了isShow的变量,通过该值是否为true,控制div的显示与隐藏。

函数

当然你可以通过,添加一个按钮,通过单击按钮,动态的修改isShow的值。可以这样:





   show-hide
   
   
   
   

       
this is a div which is show

       <!--
this is a div which is hide
-->
       
   


图片描述

图片描述

通过单击按钮,就会切换div的显示与隐藏,如果你监视一下dom,你会发现ng-show的实现也是通过,为元素addClass或者removeClass实现的。

表达式





   show-hide
   
   
   
   

       
this is a div which is show

       <!--
this is a div which is hide
-->
       
       

isShow={{isShow}}


       
       <!-- 输入的内容是否为dog,为dog的时候显示,否则隐藏 -->
       
this is a dog

   

图片描述

总结

上面列举的三个例子,分别从为ng-show或者ng-hide设置布尔值, 表达式, 以及 函数,实现的元素显示和隐藏功能 但这三种模式将能应用到更多的场景。其实归结到底的话算是一种:控制一个布尔值来改变元素的显示与隐藏的。关于ng-hide的用法与ng-show的用法类似。这里不再赘述。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2524/viewspace-2808609/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: 正则表达式
请登录后发表评论 登录
全部评论

注册时间:2018-08-16

  • 博文量
    80
  • 访问量
    24791