举例详解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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
小米5s微信跳一跳小程序python源码
2018/01/08 Python
pandas object格式转float64格式的方法
2018/04/10 Python
pandas.cut具体使用总结
2019/06/24 Python
python中 * 的用法详解
2019/07/10 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
树转促学习心得体会
2014/09/10 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
小学班级标语口号大全
2015/12/26 职场文书
人力资源部工作计划
2019/05/14 职场文书