寫在前面
上篇文章介紹了ng-select和ng-options指令的使用，這篇文章繼續指令的學習，本篇文章講學習ng-show和ng-hide指令。
系列文章
[Angularjs]ng-select和ng-options
ng-show和ng-hide
ng-Show 和ng-Hide 允許我們顯示或隱藏不同的元素。這有助於創建Angular應用時，更方便的操作元素的顯示與隱藏，而不必使用css或者js操作元素的顯示與隱藏，這些交給angularjs來實現就可以了。我們只需要做的就是為ng-show和ng-hide指定顯示或者隱藏的條件就可以了。
一個例子
控制元素的顯示與隱藏，可以通過三種方式來實現，分別是：布爾值，表達式，函數。
布爾值
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>show-hide</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('showHideController', function ($scope) { $scope.isShow = true; }); </script> <style> .div { border: 1px solid #0094ff; background-color: rebeccapurple; } </style> </head> <body> <div ng-controller="showHideController"> <div ng-show="isShow" class="div">this is a div which is show</div> <div ng-show="!isShow" class="div">this is a div which is hide</div> <button ng-click="!isShow">按鈕</button> </div> </body> </html>
上面的例子，為ng-show指定了isShow的變量，通過該值是否為true，控制div的顯示與隱藏。
函數
當然你可以通過，添加一個按鈕，通過單擊按鈕，動態的修改isShow的值。可以這樣：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>show-hide</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('showHideController', function ($scope) { $scope.isShow = true; $scope.showorhide = function () { $scope.isShow = !$scope.isShow; } }); </script> <style> .div { border: 1px solid #0094ff; background-color: rebeccapurple; } </style> </head> <body> <div ng-controller="showHideController"> <div ng-show="isShow" class="div">this is a div which is show</div> <!--<div ng-show="!isShow" class="div">this is a div which is hide</div>--> <button ng-click="showorhide()">按鈕</button> </div> </body> </html>
通過單擊按鈕，就會切換div的顯示與隱藏，如果你監視一下dom，你會發現ng-show的實現也是通過，為元素addClass或者removeClass實現的。
表達式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>show-hide</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('showHideController', function ($scope) { $scope.isShow = true; $scope.showorhide = function () { $scope.isShow = !$scope.isShow; $scope.animal = ''; } }); </script> <style> .div { border: 1px solid #0094ff; background-color: rebeccapurple; } </style> </head> <body> <div ng-controller="showHideController"> <div ng-show="isShow" class="div">this is a div which is show</div> <!--<div ng-show="!isShow" class="div">this is a div which is hide</div>--> <button ng-click="showorhide()">按鈕</button> <h1>isShow={{isShow}}</h1> <input type="text" name="name" value="" ng-model="animal" placeholder="請輸入一種動物" /> <!-- 輸入的內容是否為dog，為dog的時候顯示，否則隱藏 --> <div ng-show="animal=='dog'">this is a dog</div> </div> </body> </html>
總結
上面列舉的三個例子，分別從為ng-show或者ng-hide設置布爾值, 表達式, 以及 函數,實現的元素顯示和隱藏功能 但這三種模式將能應用到更多的場景。其實歸結到底的話算是一種：控制一個布爾值來改變元素的顯示與隱藏的。關於ng-hide的用法與ng-show的用法類似。這里不再贅述。