举例详解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 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
详解js中的原型,原型对象,原型链
Jul 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 动态添加记录
2009/03/10 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
pyside写ui界面入门示例
2014/01/22 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
PageFactory设计模式基于python实现
2020/04/14 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
小学教师岗位职责
2013/11/25 职场文书
财务部会计岗位职责
2015/02/03 职场文书
第一节英语课开场白
2015/06/01 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Python使用Kubernetes API访问集群
2021/05/30 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang