举例详解AngularJS中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>

<a href ng-click="goCats = !goCats">Toggle Cats</a>

 
<img ng-src="/UploadFiles/2021-04-02/vkW3Lhe.jpg">

ng-src 我们使用ng-src来调用图片，这样的话Angular将在实例化及检查图像时确认是否将其隐藏。如果我们不这样的话，图片会在站点加载时弹出来，直到Angular意识到应该将其隐藏。
判断表达式
在这里我们来判断一个从输入框传来的字符串，我们把ng-mode绑定在一个输入框的里面并命名为aminal变量，并根据这个变量的内容来显示不同的图片。
下面我们会把我们的变量名焦作aminal。

 




<input type="text" ng-model="aminal">



然后我们会使用ng-show来对字符串进行判断。

 




<img ng-src="/UploadFiles/2021-04-02/vkW3Lhe.jpg">

使用方法
我们会做一个简单的检查来判断输入的是奇数还是偶数。 我们会创建一个方法在我们的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>



 

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