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


Posted in Javascript onDecember 29, 2017

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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程序设计有所帮助。

Javascript 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
AngularJS表单验证功能分析
May 26 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
js实现手机web图片左右滑动效果
Dec 29 #Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 #Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 #Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 #Javascript
深入浅析vue组件间事件传递
Dec 29 #Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 #Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 #Javascript
You might like
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
IDEA安装vue插件图文详解
2019/09/26 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
python中lambda()的用法
2017/11/16 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
python opencv肤色检测的实现示例
2020/12/21 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
初中英语课后反思
2014/04/25 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers