AngularJS HTML DOM AngularJS는 어플리케이션 데이터를 HTML DOM 요소의 속성과 결합하기 위한 지시어를 가지고 있습니다.
1. The ng-disabled Directive
ng-disabled 지시어는 AngularJS 어플리케이션 데이터를 HTML 요소의 속성을 못 쓰게하는 연결입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <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> </body> </html> | cs |
ng-disabled 지시어는 어플리케이션 데이터 mySwitch를 HTML 버튼의 disabled 속성과 연결합니다.
ng-model 지시어는 HTML 체크박스 요소의 속성과 mySwitch 값을 연결합니다.
mySwitch 값이 true로 바뀌면, 버튼은 사용할 수 없게 됩니다:
| <p><button disabled>Click Me!</button></p> | cs
|
mySwitch 값이 false로 바뀌면, 버튼은 사용가능합니다:
1 | <p><button>Click Me!</button></p> | cs |
2. The ng-show Directive
ng-show 지시어는 HTML 요소를 보이거나 숨깁니다.
| <div ng-app=""> <p ng-show="true">I am visible.</p> <p ng-show="false">I am not visible.</p> </div> | cs |
ng-show 지시어는 ng-show의 값을 기준으로 HTML 요소를 보이거나 숨깁니다.
어떠한 식을 써서 표현할 수도 있습니다:
| <div ng-app=""> <p ng-show="hour > 12">I am visible.</p> </div> | cs |
3. The ng-hide Directive
ng-hide 지시어는 ng-show와 반대로 작용합니다:
| <div ng-app=""> <p ng-hide="true">I am not visible.</p> <p ng-hide="false">I am visible.</p> </div> | cs |
* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
