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 lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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也可以?成Shell Script
2006/10/09 PHP
解析php常用image图像函数集
2013/06/24 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php获取linux命令结果的实例
2017/03/13 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
历史系自荐信范文
2013/12/24 职场文书
工程招投标邀请书
2014/01/26 职场文书
教师党员公开承诺书
2014/03/25 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
小学教师工作总结2015
2015/04/07 职场文书
Python基础知识之变量的详解
2021/04/14 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis