HideShow HTML 元素

此示例隐藏显示 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>

现场演示

分步说明:

  1. ng-app="myDemoApp",ngApp 指令告诉 angular,DOM 元素由名为 myDemoApp 的特定 angular.module控制。
  2. <script src="[//angular include]"> 包括角度 js。
  3. HideShowController 函数定义包含另一个名为 toggle 的函数,它有助于隐藏显示元素。
  4. angular.module(...) 创建了一个新模块。
  5. .controller(...) Angular Controller 并返回模块进行链接;
  6. ng-controller 指令是角度如何支持模型 - 视图 - 控制器设计模式背后的原则的关键方面。
  7. ng-show 指令显示给定的 HTML 元素,如果提供的表达式为 true。
  8. 如果提供的表达式为 true,ng-hide 指令会隐藏给定的 HTML 元素。
  9. ng-click 指令触发控制器内的切换功能