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 相关文章推荐
Jquery时间验证和转换工具小例子
Jul 01 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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之数据库操作详解及乱码解决!
2007/01/02 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
计算机学生的自我评价分享
2014/02/18 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
信用卡收入证明范本
2015/06/12 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
详解Vue的列表渲染
2021/11/20 Vue.js