舉例詳解AngularJS中ngShow和ngHide的使用方法

　　這篇文章主要介紹了舉例詳解AngularJS中ngShow和ngHide的使用方法,AngularJS是一款非常熱門的JavaScript框架,需要的朋友可以參考下

　　今天我們來看看怎樣使用Angular的ngShow 和ngHide 指令來完成它們聽起來應該完成的，顯示和隱藏!

　　它們應該做的事

　　ngShow 和ngHide 允許我們顯示或隱藏不同的元素。這有助於創建Angular應用時因為我們的單頁程序會有許多的移動部件隨著應用狀態的改變而來來去去。

　　這些指令的最偉大的部分就是我們不必使用CSS或者JS來操作顯示還是隱藏。這些都是由老練的Angular來完成。

　　用法

 

　　想使用ngShow 或ngHide, 只需將指令添加到你想要顯示或者隱藏的元素上即可。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!-- 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。

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

然後我們可以使用ng-show來顯示或隱藏分類圖像。

? 1 2   <img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

       ng-src 我們使用ng-src來調用圖片，這樣的話Angular將在實例化及檢查圖像時確認是否將其隱藏。如果我們不這樣的話，圖片會在站點加載時彈出來，直到Angular意識到應該將其隱藏。

判斷表達式

        在這裡我們來判斷一個從輸入框傳來的字符串，我們把ng-mode綁定在一個輸入框的裡面並命名為aminal變量，並根據這個變量的內容來顯示不同的圖片。

下面我們會把我們的變量名焦作aminal。

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

然後我們會使用ng-show來對字符串進行判斷。

? 1 <img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

        使用方法

        我們會做一個簡單的檢查來判斷輸入的是奇數還是偶數。 我們會創建一個方法在我們的AngularJS文件中：

? 1 2 3 4 5 6 7 8 9 10 11 12 // 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控制整潔和可測試。

? 1 2 3 4 5 6 7 8 9 <!-- 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>

       結論

        有了這兩個方向的指引,我們的應用會有很大的改觀. 而這些只是基於 布爾值, 表達式, 以及 函數,實現的元素顯示和隱藏功能 但這三種模式將能應用到更多的場景.