Angular实现点击按钮控制隐藏和显示功能示例_angularjs2是否隐藏 - CSDN文库

101 浏览量更新于2023-05-11 评论收藏 33KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与

隐藏的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38674415

粉丝: 5
资源: 920

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈