本篇介紹angular控制視圖的顯示和隱藏:
通過給元素添加ng-show屬性或者ng-hide屬性來控制視圖的顯示或隱藏:
ng-show: 綁定的數據值為true時,顯示元素,值為false時,隱藏元素
ng-hide: 綁定的數據值為true時,隱藏元素,值為false時,顯示元素
(其實只要用到其中一個就可以了)
下面來看個簡單的例子,點擊按鈕可以顯示/隱藏元素:
<!DOCTYPE html> <html ng-app> <head> <title>5.1.顯示和隱藏</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="ShowHide"> <ul> <button ng-click="toggleShow()">{{text}}</button> </ul> <div class="content" ng-show="ifShow"></div> </div> </body> </html>
function ShowHide ($scope){ $scope.text = "點擊顯示框"; $scope.ifShow = false; $scope.toggleShow = function(){ $scope.ifShow = !$scope.ifShow; $scope.text = $scope.text=='點擊顯示框' ? '點擊隱藏框' : '點擊顯示框' } }
給button綁定點擊事件回調,點擊的時候觸發toggleShow回調
toggleShow回調會對ifShow變量取反,然后對應的ui的就是被隱藏/顯示
同時,toggleShow回調也改變按鈕的文本提示
原始頁面:
點擊按鈕后:
再次點擊后:
