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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
VUE实现图片验证码功能
Nov 18 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
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
js中replace的用法总结
2013/12/27 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
python解析xml文件实例分析
2015/05/27 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python3 flask实现文件上传功能
2020/03/20 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
详解Python的循环结构知识点
2019/05/20 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
教师师德师风整改措施
2014/10/24 职场文书
大学生村官个人总结
2015/02/15 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript