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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 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入门速成教程
2007/03/19 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
yii分页组件用法实例分析
2015/12/28 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
详解ES7 Decorator 入门解析
2019/02/18 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
社会调查研究计划书
2014/05/01 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
公司出纳岗位职责
2015/03/31 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android