AngularJS实现元素显示和隐藏的几个案例

案例一：控制超文本标记语言元素显示和隐藏有n种方法：html的隐藏、css的显示、jquery的隐藏()和show()，自举的。藏起来。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态。监听函数、如果判断、选择dom、设置唐，5岁行代码搞不定吧，而且毫无技术含量。看代码：

！DOCTYPE html html ng-app head meta charset=' utf-8 ' title-show和隐藏指令/title/head dydiv ng-controller='可见控制器' p ng-show='可见'字符串1/p p ng-hide="可见"字符串2/p按钮ng-click='toggle()'切换/button/div脚本src='http:/lib/angular js/1。2 .26/棱角分明。量滴js '/脚本脚本函数可见控制器($ scope){ $ scope。可见=假；$ scope。toggle=function(){ $ scope。可见=！$ scope.visible} }/脚本/正文/html案例二：对于菜单、上下文敏感的工具以及很多其他情况来说，显示和隐藏元素是一项核心的功能。与安古尔中其他功能一样棱角分明是通过修改数据模型的方式来驱动用户界面刷新，然后通过指令把变更反应到用户界面上表演和隐藏这两条指令的功能是等价的，但是运行效果正好相反，我们都可以根据所传递的表达式来显示或隐藏元素。也就是说吴秀在表达式为真实的时将会显示元素，为错误的时将会隐藏元素；而隐藏则恰好相反。这两条指令的工作原理是：根据实际情况把元素的样式设置为显示：块来显示元素；设置为display:none来隐藏元素。实例：

html ng-app=' Myapp '标题ng-show实例/title/head body ng-controller=' show controller '按钮ng-click=' Toggle Menu()' Toggle Menu/button ul ng-show=' menustate。show ' listun/Lili discarter/Lili从历史中删除/Li/ulscript src=' http : lib/angular/angular。js '/脚本var myApp=angular。模块(' myApp '，[])myApp。控制器(' show controller '，函数($ scope){ $ scope。menustate={ show : false } $ scope .$ scope。menustate。展示；}});/脚本/正文/html运行结果：

点击"切换菜单"按钮，效果如下：

再次点击"切换菜单"按钮，下面的信息又隐藏了，交替变换。

案例三：

！DOCTYPE html html ng-app=' a2 _ 12 ' head meta charset=' utf-8 ' title/title script type=' text/JavaScript ' src=' http :/js/angularJs-1。2 .16分钟。js /脚本样式类型=' text/CSS '正文{ font-size : 12px} ul { list-style-type : no；宽度： 408像素；margin : 0pxpadding : 0px } div { margin : 8px 0px }/style/head body div ng-controller=' C2 _ 12 ' div ng-show=' { { isShow } } '脚本/div ng-hide=' { { Ishide } } '[email protected]/div ul ng-switch on={ { switch } } Li ng-switch-when=' 1 ' 11111111111/Li Li ng-switch-when=' 2 ' 22222222222/Li Li ng-switch-默认值33333333/Li/ul/div脚本类型=' text/a2_12.controller('c2_12 '，['$scope '，function($ scope){ $ scope。isshow=true$ scope.isHide=false$ scope。switch=2；}]);/脚本/正文/html-switch指令的功能是显示匹配成功的元素，该指令需要结合ng-开关-何时和ng-开关-默认指令使用。

当指定的在值与某个或多个添加ng-开关-何时指令的元素匹配时，这些元素显示，未匹配到的元素的隐藏。

如果没有找到与在值相匹配的元素时，则显示添加了ng-开关-默认指令的元素。

以上就是为大家分享的三个AngularJS实现显示和隐藏的三个案例，希望对大家的学习有所帮助。