有角度实现点击按钮控制隐藏和显示功能示例

本文实例讲述了有角的实现点击按钮控制隐藏和显示功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net Angular显示隐藏/title样式盒子{宽度： 100像素高度： 100像素；背景：红色；}/style脚本src=' http : angular。量滴js '/script脚本var myapp=angular。模块(' myapp '，[])；myapp.controller('myCtrl '，函数($ scope){ $ scope。show=true$ scope。fun=function(){ $ scope。show=！$ scope.showconsole。日志($ scope)。显示)；} $ scope.hide=true$ scope。func=function(){ $ scope。隐藏=！$ scope . hide } })/script/head body ng-app=' myapp ' ng-controller=' myCtrl ' div class=' box ' ng-show=' show '/div button ng-click=' fun()'点击切换/button div ng-class=' { box : hide } '/div button ng-click=' func()'按钮/按钮/正文/html更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。