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 相关文章推荐
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jquery常用操作小结
Jul 21 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
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
Zend Framework入门知识点小结
2016/03/19 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
Javascript MD4
2006/12/20 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
Ext 今日学习总结
2010/09/19 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
python基础教程之Filter使用方法
2017/01/17 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
能源工程专业应届生求职信
2014/03/01 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
监察建议书格式
2014/05/19 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
建国大业观后感
2015/06/01 职场文书