举例详解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 CSS画图之基础篇
Jul 29 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
浅谈JavaScript闭包
Apr 09 Javascript
详解如何运行vue项目
Apr 15 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
使用npm安装最新版本nodejs
2018/01/18 NodeJs
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
化学教师教学反思
2014/01/17 职场文书
美术指导求职信
2014/03/17 职场文书
单位在职证明书
2014/09/11 职场文书
干部作风建设心得体会
2014/10/22 职场文书
大学生创业事迹材料
2014/12/30 职场文书
环卫处个人工作总结
2015/03/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
学校运动会加油词
2015/07/18 职场文书
终止合同协议书范本
2016/03/22 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
JavaScript实现音乐播放器
2022/08/14 Javascript