AngularJS #16 - HTML DOM

✔ AngularJS HTML DOM

 > AngularJS는 directive를 통해 어플리케이션의 데이터를 HTML DOM 요소와 묶는다

 

1. The ng-disabled Directive

 > ng-disabled directive는 AngularJS 어플리케이션 데이터를 HTML의 disabled와 묶는다

<div ng-app="" ng-init="mySwitch=true">
 <p>
  <button ng-disabled="mySwitch">Click Me!</button>
 </p>
 
 <p>
  <input type="checkbox" ng-model="mySwitch" />Button
 </p>
 
 <p>{{ mySwitch }}</p>
</div>

 : 설명하자면 체크박스의 값을 ng-model에서 받아서 해당 값을 통해서 button의 ng-disabled 값이 변하여 버튼이 활성화 및 비활성화 되고, 그 값이 {{ }}를 통해서 text로 나타나게 된다

 

 

2. The ng-show Directive

 > ng-show directive를 통해서 HTML 요소를 보이거나 숨기게 할 수 있음

<div ng-app="">
 <p ng-show="true">I am visible</p>
 <p ng-show="false">I am invisible</p>
</div>

 

3. THe ng-hide Directive

 > ng-hide directive도 HTML 요소를 보이서나 숨기게 할 수 있음

<div ng-app="">
 <p ng-hide="true">I am invisible.</p>
 <p ng-hide="false">I am visible.</p>
</div>

 

 

 

 

 

 

** 위 글은 w3schools.com에 있는 내용을 한국어로 번역하여 적어둔 글입니다.

- https://www.w3schools.com/angular/angular_htmldom.asp

Angular HTML DOM