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 个人笔记(没有整理,很乱)
Jul 07 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
限制只能输入数字的实现代码
May 16 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 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中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP 断点续传实例详解
2017/11/11 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
超简单使用Python换脸实例
2019/03/27 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
汽车专业求职信
2014/06/05 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
先进个人申报材料
2014/12/30 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python