举例详解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 动态修改样式和层叠样式表代码
Apr 27 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
详解vue路由
Aug 05 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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 写文本日志实现代码
2010/05/18 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php 类自动载入的方法
2015/06/03 PHP
asp.net和php的区别点总结
2019/10/10 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
JavaScript实现换肤功能
2017/09/15 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python实现文本文件合并
2015/12/29 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python二维码生成识别实例详解
2019/07/16 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Django xadmin安装及使用详解
2020/10/26 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
最受欢迎的自我评价
2013/12/22 职场文书
服务之星获奖感言
2014/01/21 职场文书
食品安全责任书
2014/04/15 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS