AngularJS改变元素显示状态的实现方法-创新互联

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

成都创新互联专注于企业成都全网营销、网站重做改版、湖北网站定制设计、自适应品牌网站建设、H5建站商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为湖北等各大城市提供网站开发制作服务。

实例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改变元素显示状态的实现方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网页名称:AngularJS改变元素显示状态的实现方法-创新互联
    路径分享:http://pwwzsj.com/article/ccecoh.html

    其他资讯