举例详解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 相关文章推荐
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
JS实现li标签的删除
Apr 12 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python collections模块实例讲解
2014/04/07 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
import的本质解析
2017/10/30 Python
python实现局域网内实时通信代码
2019/12/22 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
给儿子的表扬信
2014/01/15 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
假释思想汇报范文
2014/10/11 职场文书
放假通知格式
2015/04/14 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python