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]"> 각도 j를 포함합니다.
HideShowController 함수는 요소 표시를 숨기는 데 도움이되는 toggle 이라는 다른 함수를 포함하여 정의됩니다.
angular.module(...) 은 새 모듈을 만듭니다.
.controller(...) 앵귤러 컨트롤러 .controller(...) Angular Controller .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 요소 숨기기 / 표시