AngularJS改变元素显示状态的实现方法

这篇文章主要介绍了AngularJS改变元素显示状态的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、网站制作、外贸营销网站建设、江山网络推广、微信小程序开发、江山网络营销、江山企业策划、江山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供江山建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

实例1

 
 
 字符串1

   字符串2

   切换 
       

两个指令很简单,只是ng-show在true时显示,false时隐藏,而ng-hide效果相反。

对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样,Angular是通过修改数据模型的方式来驱动UI刷新,然后通过指令把变更反应到UI上。

ng-show和ng-hide这两条指令的功能是等价的,但是运行效果正好相反,我们都可以根据所传递的表达式来显示或隐藏元素。也就是说,ng-show在表达式为true时将会显示元素,为false时将会隐藏元素;而ng-hide则恰好相反。

工作原理

这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block来显示元素;设置为display:none来隐藏元素。

实例2

 
Toggle Menu 
 
  • Stun
  •  
  • Disintegrate
  •  
  • Erase from history
  •          

    感谢你能够认真阅读完这篇文章,希望小编分享的“AngularJS改变元素显示状态的实现方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


    本文名称:AngularJS改变元素显示状态的实现方法
    链接URL:http://hbruida.cn/article/gdghsg.html

    其他资讯