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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
JS编程小常识很有用
Nov 26 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
解决vue scoped html样式无效的问题
Oct 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实现小型站点广告管理
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
浅析php原型模式
2014/11/25 PHP
Javascript----文件操作
2007/01/18 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
敬老模范事迹
2014/05/21 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书