angular學習筆記(八)-控制檢視顯示隱藏

詩&遠方發表於2014-05-08
Angular筆記

本篇介紹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回撥也改變按鈕的文字提示

 

原始頁面:

點選按鈕後:

再次點選後:

 

相關文章