Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 9. HTML DOM - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 9. HTML DOM - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:26
728x90
반응형

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로 바뀌면, 버튼은 사용할 수 없게 됩니다:


  

 

1
2
 
<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 요소를 보이거나 숨깁니다.


1
2
3
4
5
6
7
<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 요소를 보이거나 숨깁니다.

 어떠한 식을 써서 표현할 수도 있습니다:



 

1
2
3
4
5
<div ng-app="">
 
<p ng-show="hour > 12">I am visible.</p>
 
</div>
cs





3. The ng-hide Directive
 ng-hide 지시어는 ng-show와 반대로 작용합니다:


1
2
3
4
5
6
7
<div ng-app="">
 
<p ng-hide="true">I am not visible.</p>
 
<p ng-hide="false">I am visible.</p>
 
</div>
cs








* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 11. 모듈(module) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 10. HTML Event - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 8. SQL - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 7. Table - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 6. Http - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more