HideShow HTML 元素

Created: November-22, 2018

此示例隱藏顯示 html 元素。

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>

      function HideShowController() {
        var vm = this;
        vm.show=false;
        vm.toggle= function() {
          vm.show=!vm.show;
        }
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .controller("hideShowController", [HideShowController]);
    </script>
  </head>
  <body ng-cloak>
    <div ng-controller="hideShowController as vm">
      <a style="cursor: pointer;" ng-show="vm.show" ng-click="vm.toggle()">Show Me!</a>
      <a style="cursor: pointer;" ng-hide="vm.show" ng-click="vm.toggle()">Hide Me!</a>
    </div>
  </body>
</html>

現場演示

分步說明：

ng-app="myDemoApp"，ngApp 指令告訴 angular，DOM 元素由名為 myDemoApp 的特定 angular.module控制。
<script src="[//angular include]"> 包括角度 js。
HideShowController 函式定義包含另一個名為 toggle 的函式，它有助於隱藏顯示元素。
angular.module(...) 建立了一個新模組。
.controller(...) Angular Controller 並返回模組進行連結;
ng-controller 指令是角度如何支援模型 - 檢視 - 控制器設計模式背後的原則的關鍵方面。
ng-show 指令顯示給定的 HTML 元素，如果提供的表示式為 true。
如果提供的表示式為 true，ng-hide 指令會隱藏給定的 HTML 元素。
ng-click 指令觸發控制器內的切換功能