举例详解AngularJS中ngShow和ngHide的使用方法


Posted in Javascript onJune 19, 2015

今天我们来看看怎样使用Angular的ngShow 和ngHide   指令来完成它们听起来应该完成的,显示和隐藏!
它们应该做的事

ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。

这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏。这些都是由老练的Angular来完成。

用法

想使用ngShow 或ngHide, 只需将指令添加到你想要显示或者隐藏的元素上即可。
 

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>  
 
 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>  
 
<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 
 
<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

一旦我们设置了我们标记,我们可以多种方式设置hello或者goodbye。你可以将它设置到你的Angular控制器里并且让你的div在应用加载的时候显示或隐藏。

上面的这些都可以用于ng-show或者ng-hide。如果值或表达式或函数返回true,则会隐藏一些东西。

用作布尔值

我们将创建使用ng-click的链接,并切换goCats的值为true或false。

<a href ng-click="goCats = !goCats">Toggle Cats</a>

然后我们可以使用ng-show来显示或隐藏分类图像。

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src 我们使用ng-src来调用图片,这样的话Angular将在实例化及检查图像时确认是否将其隐藏。如果我们不这样的话,图片会在站点加载时弹出来,直到Angular意识到应该将其隐藏。

判断表达式

在这里我们来判断一个从输入框传来的字符串,我们把ng-mode绑定在一个输入框的里面并命名为aminal变量,并根据这个变量的内容来显示不同的图片。

下面我们会把我们的变量名焦作aminal。
 

<input type="text" ng-model="aminal">

然后我们会使用ng-show来对字符串进行判断。
 

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

使用方法

我们会做一个简单的检查来判断输入的是奇数还是偶数。 我们会创建一个方法在我们的AngularJS文件中:
 

// set the default value of our number
$scope.myNumber = 0;
   
// function to evaluate if a number is even
$scope.isEven = function(value) {
 
if (value % 2 == 0)
 return true;
else 
 return false;
 
};

方法创建完成之后, 我们接下来要做的就是通过ng-show或者ng-hide来使用它,并传入我们的数字。通过方法传数字这种方法,可以保持Angular控制整洁和可测试。
 

<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
  <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
  <h2>The number is odd.</h2>
</div>

 
结论

有了这两个方向的指引,我们的应用会有很大的改观. 而这些只是基于 布尔值, 表达式, 以及 函数,实现的元素显示和隐藏功能 但这三种模式将能应用到更多的场景.

Javascript 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
svg动画之动态描边效果
Feb 22 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序实现横向增长表格的方法
Jul 24 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 #Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 #Javascript
Backbone.js的Hello World程序实例
Jun 19 #Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 #Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 #Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 #Javascript
You might like
php的ZipArchive类用法实例
2014/10/20 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python实现括号匹配的思路详解
2018/08/23 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
软件设计的目标是什么
2016/12/04 面试题
实习单位接收函
2014/01/11 职场文书
同事吵架检讨书
2014/02/05 职场文书
优秀广告词大全
2014/03/19 职场文书
采购部长岗位职责
2014/06/13 职场文书
参观邀请函范文
2015/02/02 职场文书
会计专业自荐信范文
2015/03/05 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
毕业证明模板
2015/06/19 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python