AngularJS实现DOM元素的显示与隐藏功能


Posted in Javascript onNovember 22, 2016

本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能。分享给大家供大家参考,具体如下:

DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean。

【HTML代码】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>angularjs 显示隐藏元素</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body ng-app="showHide">
 <div ng-controller="showElements">
  <div ng-show="butshow">我出现了</div>
  <button ng-click="toggle();">显示/隐藏</button>
 </div>
</body>
<script src="./js/angular.min.js"></script>
<script>
 angular.module("showHide",[]).controller('showElements', ['$scope', function($scope){
   $scope.butshow = true;
   $scope.toggle= function(){
   $scope.butshow = !($scope.butshow);
   }
 }])
</script>
</html>

PS:这里有个问题:就是当我直接设置 $scope.but.show 变量的时候 出现了一大堆错误,难道不允许这样设置变量?

有知道的大神欢迎补充一下,谢谢!

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
JavaScript ES6中CLASS的使用详解
Nov 22 #Javascript
AngularJS实现ajax请求的方法
Nov 22 #Javascript
js数组操作方法总结(必看篇)
Nov 22 #Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 #Javascript
js字符串操作总结(必看篇)
Nov 22 #Javascript
JavaScript的兼容性与调试技巧
Nov 22 #Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 #Javascript
You might like
解析php中const与define的应用区别
2013/06/18 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
php实现微信企业转账功能
2018/10/02 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python中的装饰器详解
2015/04/13 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python实现IOU计算案例
2020/04/12 Python
python Pexpect模块的使用
2020/12/25 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
大学生实习证明范本
2014/01/15 职场文书
小学语文课后反思精选
2014/04/25 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
导游词之山海关
2019/12/10 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
Python实现仓库管理系统
2022/05/30 Python