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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jQuery链使用指南
Jan 20 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
移动端界面的适配
Jan 11 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
复习Python中的字符串知识点
2015/04/14 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python多进程间通信代码实例
2019/09/30 Python
Python作用域与名字空间原理详解
2020/03/21 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
心理健康教育心得体会
2013/12/29 职场文书
高三体育教学反思
2014/01/29 职场文书
老同学聚会感言
2014/02/23 职场文书
纠纷协议书
2014/04/16 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
MongoDB使用场景总结
2022/02/24 MongoDB