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全部源代码
May 04 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jquery replace方法去空格
May 08 jQuery
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP strtotime函数详解
2009/12/18 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
php实现三级级联下拉框
2016/04/17 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
js下弹出窗口的变通
2007/04/18 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python 在函数上添加包装器
2020/07/28 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
通信研究生自荐信
2014/02/01 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android