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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
潜说js对象和数组
May 25 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
详解vue-cli3使用
Aug 14 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
JS图片预加载三种实现方法解析
May 08 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
一个取得文件扩展名的函数
2006/10/09 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
javascript数组详解
2014/10/22 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python实现的批量下载RFC文档
2015/03/10 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python图像处理入门(一)
2019/04/04 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
40岁生日感言
2014/02/15 职场文书
小学生安全责任书
2014/07/25 职场文书
九年级英语教学反思
2016/02/15 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
导游词之清晏园
2019/11/22 职场文书
mysql如何查询连续记录
2022/05/11 MySQL
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript