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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
js实现简单的打印表格
Jan 15 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python django 访问静态文件出现404或500错误
2017/01/20 Python
python实现京东秒杀功能
2018/07/30 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
详解Python 函数参数的拆解
2020/09/02 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
银行自荐信范文
2013/10/07 职场文书
公司培训欢迎词
2014/01/10 职场文书
高中军训感言500字
2014/02/24 职场文书
岗位说明书范文
2014/05/07 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Golang 并发下的问题定位及解决方案
2022/03/16 Golang