举例详解AngularJS中ngShow和ngHide的使用方法  更新时间:2015年06月19日 11:47:06   投稿:goldensun   这篇文章主要介绍了举例详解AngularJS中ngShow和ngHide的使用方法,AngularJS是一款非常热门的JavaScript框架,需要的朋友可以参考下 今天我们来看看怎样使用Angular的ngShow 和ngHide   指令来完成它们听起来应该完成的,显示和隐藏! 它们应该做的事 ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。 这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏。这些都是由老练的Angular来完成。 用法 想使用ngShow 或ngHide, 只需将指令添加到你想要显示或者隐藏的元素上即可。   this is a welcome message this is a goodbye message this is a goodbye message 一旦我们设置了我们标记,我们可以多种方式设置hello或者goodbye。你可以将它设置到你的Angular控制器里并且让你的div在应用加载的时候显示或隐藏。 上面的这些都可以用于ng-show或者ng-hide。如果值或表达式或函数返回true,则会隐藏一些东西。 用作布尔值 我们将创建使用ng-click的链接,并切换goCats的值为true或false。 Toggle Cats 然后我们可以使用ng-show来显示或隐藏分类图像。 ng-src 我们使用ng-src来调用图片,这样的话Angular将在实例化及检查图像时确认是否将其隐藏。如果我们不这样的话,图片会在站点加载时弹出来,直到Angular意识到应该将其隐藏。 判断表达式 在这里我们来判断一个从输入框传来的字符串,我们把ng-mode绑定在一个输入框的里面并命名为aminal变量,并根据这个变量的内容来显示不同的图片。 下面我们会把我们的变量名焦作aminal。   然后我们会使用ng-show来对字符串进行判断。   使用方法 我们会做一个简单的检查来判断输入的是奇数还是偶数。 我们会创建一个方法在我们的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控制整洁和可测试。   The number is even. The number is odd.   结论 有了这两个方向的指引,我们的应用会有很大的改观. 而这些只是基于 布尔值, 表达式, 以及 函数,实现的元素显示和隐藏功能 但这三种模式将能应用到更多的场景. 您可能感兴趣的文章: 利用JavaScript的AngularJS库制作电子名片的方法 使用AngularJS制作一个简单的RSS阅读器的教程 使用AngularJS中的SCE来防止XSS攻击的方法 AngularJS 相关文章 angularjs实现文字上下无缝滚动特效代码 这篇文章主要介绍了angularjs实现文字上下无缝滚动特效代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-09-09 解决angularjs WdatePicker ng-model的问题 今天小编就为大家分享一篇解决angularjs WdatePicker ng-model的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 浅谈AngularJS中ng-class的使用方法 下面小编就为大家带来一篇浅谈AngularJS中ng-class的使用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-11-11 AngularJs基于角色的前端访问控制的实现 本篇文章主要介绍了AngularJs实现基于角色的前端访问控制,可以适用于不同的角色,有需要的可以了解一下。 2016-11-11 Angular的模块化(代码分享) 本文主要对Angular的模块化进行案例分析介绍,具有一定的参考价值,下面跟着小编一起来看下吧 2016-12-12 Angular4开发解决跨域问题详解 本篇文章主要介绍了Angular4开发解决跨域问题详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 Angular路由简单学习 这篇文章主要和大家一起学习Angular路由,介绍angular的$route的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 Angular 路由route实例代码 下面小编就为大家带来一篇Angular 路由route实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-07-07 webapp框架AngularUI的demo改造之路 这篇文章主要介绍了webapp框架AngularUI的demo改造之路,需要的朋友可以参考下 2014-12-12 详解如何使用webpack+es6开发angular1.x 本篇文章主要介绍了详解如何使用webpack+es6开发angular1.x,具有一定的参考价值,有兴趣的可以了解一下 2017-08-08 最新评论

今天我们来看看怎样使用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的AngularJS库制作电子名片的方法
  • 使用AngularJS制作一个简单的RSS阅读器的教程
  • 使用AngularJS中的SCE来防止XSS攻击的方法
张贴在3