AngularJS HTML DOM


AngularJS는 애플리케이션 데이터를 HTML DOM 요소의 속성에 바인딩하기 위한 지침을 제공합니다.

ng-disabled 지시문

ng-disabled 지시문은 애플리케이션 데이터를 HTML의 비활성화 속성에 직접 바인딩합니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

인스턴스 설명:

ng-disabled 이 명령은 애플리케이션 데이터 "mySwitch"를 다음에 바인딩합니다. HTML 속성에서 비활성화되었습니다.

ng-model 지시문은 "mySwitch"를 HTML 입력 확인란 요소의 콘텐츠(값)에 바인딩합니다.

mySwitch가 true이면 버튼이 비활성화됩니다.

<p>
<button disabled >클릭해주세요! </button>
</p>

mySwitch가 false인 경우 버튼을 사용할 수 있습니다:

< p >
<button>클릭해주세요!</button>
</p&g t;

ng -show 명령

ng-show 명령은 HTML 요소를 숨기거나 표시합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div> 

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

ng-show 명령은 value 값을 기반으로 HTML 요소를 표시(숨깁니다)합니다.

식을 사용하여 부울 값 ​​(true 또는 false)을 계산할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


Note다음 장에서는 버튼을 클릭하여 HTML 요소를 숨기는 방법에 대한 더 많은 예를 제공하겠습니다.

ng-hide 지시문

ng-hide 지시문은 HTML 요소를 숨기거나 표시하는 데 사용됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div> 

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요