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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
使用console进行性能测试
Apr 27 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
简单实现js上传文件功能
Aug 21 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 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实现统计邮件大小的方法
2013/08/06 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Pygame框架实现飞机大战
2020/08/07 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
小学生作文评语
2014/04/18 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
2015年教师节慰问信
2015/03/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
门卫管理制度范本
2015/08/05 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Django 如何实现文件上传下载
2021/04/08 Python