AngularJS => 組み込みディレクティブの使用

HTML要素の非表示/表示

この例では、show 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 ディレクティブは、DOM要素が "myDemoApp"という特定のangular.moduleによって制御されていることを角度に伝えます。
<script src="[//angular include]">含みます。
HideShowController関数は、要素の表示を隠すのに役立つ、 toggleという名前の別の関数を含んで定義されていtoggle 。
angular.module(...)は、新しいモジュールを作成します。
.controller(...) 角度制御器であり、連鎖のためのモジュールを返します。
ng-controller 指令は、Model-View-Controller設計パターンの背後にある原則をどのようにサポートするかの重要な側面です。
ng-show ディレクティブは、指定された式がtrueの場合、指定されたHTML要素を表示します。
ng-hide ディレクティブは、指定された式がtrueの場合、指定されたHTML要素を隠します。
ng-click ディレクティブは、コントローラ内のトグル機能を起動します。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

AngularJS
組み込みディレクティブの使用

サーチ…

HTML要素の非表示/表示