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 ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
js获取height和width的方法说明
Jan 06 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
Sort()函数的多种用法
Mar 20 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
vuex入门最详细整理
Mar 04 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
前端性能优化建议
2020/09/17 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
基督教婚礼主持词
2014/03/14 职场文书
2014年司法局工作总结
2014/12/11 职场文书