如何使用 AngularJS 的 ngShow 和 ngHide

今天我们来看看怎样使用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>

结论

有了这两个方向的指引,我们的应用会有很大的改观. 而这些只是基于 布尔值, 表达式, 以及函数,实现的元素显示和隐藏功能但这三种模式将能应用到更多的场景.

希望本文能帮助你构建更好的AngularJS应用.在后续的文章中我们会介绍 ngShow 和 ngHide 以创建更多动态展示的应用.