时间:2021-05-28
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据。如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按
AxureRP8中自带了图片元件,导入图片后可以调整样式显示。添加按钮,控制图片显示和隐藏。下面利用一个实例说明按钮控制图片显示和隐藏的用法,操作如下:软件名称
起步:直接使用ngIf把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示。改进:封装成angular模块,通过服务控制其显示直接使用ngIf的
平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。简单写个Demo显示或隐藏内容
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框。css肯定是用来控制样式的,js用来控制器显示与隐藏的。显示与隐藏通常有两种方法实现:1,用js控制