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复选框CHECKBOX全选、反选
Aug 30 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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实现图片添加水印功能
2014/02/13 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
了解一点js的Eval函数
2012/07/26 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python 定时修改数据库的示例代码
2018/04/08 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
华为慧通笔试题
2016/04/22 面试题
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
初中生物教学反思
2014/01/10 职场文书
教导处工作制度
2014/01/18 职场文书
将相和教学反思
2014/02/04 职场文书
业务员的岗位职责
2014/03/15 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
字节飞书面试promise.all实现示例
2022/06/16 Javascript
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python