Angular实现点击按钮控制隐藏和显示功能示例
2017-12-29 11:31
1041 查看
本文实例讲述了Angular实现点击按钮控制隐藏和显示功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示隐藏</title> <style> .box{ width: 100px; height: 100px; background: red; } </style> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.show=true; $scope.fun=function () { $scope.show=!$scope.show; console.log($scope.show); } $scope.hide=true; $scope.func=function () { $scope.hide=!$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()">按钮</button> </body> </html>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- javascript控制点击一次按钮实现元素的显示隐藏
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- 怎样用jquery实现点击一个按钮控制一个div的显示和隐藏
- displaytag的使用方法(用于数据表格的显示和功能控制) tabledecorator实现链接按钮
- Android TextView实现点击显示全文与隐藏功能(附源码)
- jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
- Angular实现的日程表功能【可添加及隐藏显示内容】
- 易语言显示和隐藏控制按钮功能
- 实现点击按钮切换显示和隐藏效果
- jQuery 实现全部到精简的转换 点击“显示全部品牌按钮”显示到第二幅图,个别文字高亮显示,并且“显示全部品牌”按钮文字变为“精简显示品牌”并且向上向下箭头改变,用JQuery实现本功能。
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- 使用jquery实现点击一个按钮或连接,让它下面的div显示,在点击一下隐藏
- javascript点击按钮实现隐藏显示切换效果
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
- [事件处理] 点击同一按钮实现div的隐藏与显示切换
- Android 使用jQuery实现item点击显示或隐藏的特效的示例
- js如何实现点击一个按钮显示一个div,然后该div上有一个按钮,点击此按钮后隐藏,隐藏的同时显示另外一个div,而在次弹出的div也有一个按钮,点击后隐藏.
- JS实现点击参数面板按钮显示或隐藏数据
- 单击按钮显示新窗体,再按下新窗体隐藏功能的实现
- angular+点击按钮,隐藏和显示F12打印状态