AngularJS HTML DOM

AngularJS는 애플리케이션 데이터를 HTML DOM 요소의 속성에 바인딩할 수 있는 지시를 제공합니다。

ng-disabled 지시

ng-disabled 지시는 AngularJS 애플리케이션 데이터를 HTML 요소의 disabled 속성에 바인딩합니다。

AngularJS 예제

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">나를 클릭하세요！</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">버튼
</p>
<p>
{{ mySwitch }}
</p>
</div>

직접 테스트해 보세요

적용 설명：

ng-disabled 지시는 애플리케이션 데이터를 mySwitch HTML 버튼에 바인딩된 disabled 속성에 바인딩합니다。

ng-model 지시는 HTML 체크박스 요소의 값을 mySwitch 의 값에 있습니다。

만약 mySwitch 의 값은 true그렇다면 버튼은 비활성화됩니다：

<p>
<button disabled>나를 클릭하세요！</button>
</p>

만약 mySwitch 의 값은 false그렇다면 버튼은 비활성화되지 않습니다：

<p>
<button>나를 클릭하세요！</button>
</p>

ng-show 지시

ng-show 지시가 HTML 요소를 표시하거나 숨기는 데 사용됩니다。

AngularJS 예제

<div ng-app="">  
<p ng-show="true">나는 보이는。</p>  
<p ng-show="false">나는 보이지 않습니다.</p>  
</div>

직접 테스트해 보세요

ng-show 지시는 ng-show의값HTML 요소를 표시(또는 숨기기).

참조할 수 있는 표현식: 참 또는 거짓으로 평가할 수 있습니다:

AngularJS 예제

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">나는 보입니다.</p>
</div>

직접 테스트해 보세요

다음 장에서는 버튼 클릭을 사용하여 HTML 요소를 숨기는 방법에 대한 더 많은 예제를 제공할 것입니다.

ng-hide 지시

ng-hide HTML 요소를 숨기거나 표시하는 지시.

AngularJS 예제

<div ng-app="">  
<p ng-hide="true">나는 보이지 않습니다.</p>  
<p ng-hide="false">나는 보입니다.</p>  
</div>

직접 테스트해 보세요