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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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
PHP HTML代码串截取代码
2008/12/29 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP7修改的函数
2021/03/09 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
詹天佑教学反思
2014/04/30 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
扬尘污染防治方案
2014/06/15 职场文书
mysql 子查询的使用
2022/04/28 MySQL