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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
JS实现图片幻灯片效果代码实例
May 21 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中使用PDF文档功能
2006/10/09 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php实现无限级分类
2014/12/24 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript 数组详解
2013/10/10 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python高并发和多线程有什么关系
2020/11/14 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
关于Java String的一道面试题
2013/09/29 面试题
企业标语大全
2014/07/01 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
高三复习计划
2015/01/19 职场文书
药店收银员岗位职责
2015/04/07 职场文书
信息技术研修心得体会
2016/01/08 职场文书
商业计划书之服装
2019/09/09 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技