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 构造函数 面相对象学习必备知识
Jun 09 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
子页向父页传值示例
Nov 27 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JS面向对象之单选框实现
Jan 17 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
PHPCMS的使用小结
2010/09/20 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python如何实现FTP功能
2020/05/28 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
士力架广告词
2014/03/20 职场文书
工地质量标语
2014/06/12 职场文书
合作协议书模板
2014/10/10 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Web应用开发TypeScript使用详解
2022/05/25 Javascript