AngularJS HTML 홈
AngularJS에는 애플리케이션 데이터를 HTML DOM 요소의 속성에 바인딩하기 위한 지시문이 있습니다.
ng-disabled 지시문
ng-disabled 지시문 은 AngularJS 애플리케이션 데이터를 HTML 요소의 disabled 속성에 바인딩합니다.
AngularJS 예제
<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-disabled 지시문 은 애플리케이션 데이터 mySwitch 를 HTML 버튼의 disabled 속성에 바인딩합니다.
ng-model 지시문 은 HTML 확인란 요소의 값을 mySwitch 값에 바인딩 합니다.
mySwitch 값이 true 로 평가 되면 버튼이 비활성화됩니다.
<p>
<button disabled>Click Me!</button>
</p>
mySwitch 값이 false 로 평가 되면 버튼이 비활성화되지 않습니다.
<p>
<button>Click Me!</button>
</p>
ng-show 지침
ng-show 지시문 은 HTML 요소를 표시하거나 숨깁니다.
AngularJS 예제
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
ng-show 지시문은 ng-show 값 에 따라 HTML 요소를 표시하거나 숨깁니다 .
true 또는 false로 평가되는 모든 표현식을 사용할 수 있습니다.
AngularJS 예제
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
다음 장에는 HTML 요소를 숨기기 위해 버튼 클릭을 사용하는 더 많은 예제가 있습니다.
ng-hide 지시문
ng-hide 지시문은 HTML 요소를 숨기거나 표시합니다 .
AngularJS 예제
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>