AngularJS HTML DOM

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

ng-disabled 지시어

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

AngularJS Examples

<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>

Try It Yourself

응용 프로그램 설명：

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 Examples

<div ng-app="">  
<p ng-show="true">나는 보이는。</p>  
<p ng-show="false">I am invisible.</p>  
</div>

Try It Yourself

ng-show Directives based on ng-show'sValueDisplay (or hide) HTML elements.

You can use any expression evaluated to true or false:

AngularJS Examples

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>

Try It Yourself

In the next chapter, more examples will be provided to explain how to use button clicks to hide HTML elements.

ng-hide directive

ng-hide Directives to hide or display HTML elements.

AngularJS Examples

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

Try It Yourself