AngularJS HTML DOM

이 지시는 애플리케이션 데이터를 HTML DOM 요소의 속성에 바인딩하는 데 사용됩니다.-

순번	이름 및 설명
1	`ng-disabled` 지정된 컨트롤을 비활성화합니다.
2	`ng-show` 지정된 컨트롤을 표시합니다.
3	`ng-hide` 지정된 컨트롤을 숨깁니다.
4	`ng-click` AngularJS click 이벤트를 나타냅니다.

ng-disabled 지시

ng-disabled 속성을 HTML 버튼에 추가하고 모델에 전달합니다. 모델을 체크박스에 바인딩하여 변화를 확인합니다.

<input type="checkbox" ng-model="enableDisableButton">Disable Button<button ng-disabled　=　"enableDisableButton">Click　Me!</button>

ng-show 지시

ng-show 속성을 HTML 버튼에 추가하고 모델에 전달합니다. 모델을 체크박스에 바인딩하여 변화를 확인합니다.

<input type="checkbox" ng-model　=　"showHide1">Show Button<button ng-show　=　"showHide1">Click　Me!</button>

ng-hide 지시

ng-hide 속성을 HTML 버튼에 추가하고 모델에 전달합니다. 모델을 체크박스에 바인딩하여 변화를 확인합니다.

<input type="checkbox" ng-model　=　"showHide2">Hide Button<button ng-hide　=　"showHide2">Click　Me!</button>

ng-click 지시

ng-click 속성을 HTML 버튼에 추가하고 모델을 업데이트합니다. 모델을 HTML에 바인딩하여 변화를 확인합니다.

<p>Total click: {{ clickCounter }}</p><button ng-click　=　"clickCounter　=　clickCounter　+　1">Click　Me!</button>

온라인 예제

이 예제는 위의 모든 지시의 사용을 보여줍니다.

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>AngularJS HTML DOM</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-HTML DOM 예제(oldtoolbag.com)</h2>
　　　　　　
　　　　　　<div ng-app="">
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input　type　=　"checkbox"　ng-model　=　"enableDisableButton">버튼 비활성화</td>
　　　　　　　　　　　　　　　<td><button　ng-disabled　=　"enableDisableButton">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input　type　=　"checkbox"　ng-model　=　"showHide1">보이기 버튼</td>
　　　　　　　　　　　　　　　<td><button　ng-show　=　"showHide1">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input　type　=　"checkbox"　ng-model　=　"showHide2">숨기기 버튼</td>
　　　　　　　　　　　　　　　<td><button　ng-hide　=　"showHide2">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><p>클릭 횟수:　{{　clickCounter　}}</p></td>
　　　　　　　　　　　　　　　<td><button　ng-click　=　"clickCounter　=　clickCounter　+　1">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트를 보세요‹/›

출력 결과

웹 브라우저에서 파일을 엽니다.testAngularJS.htm결과를 확인하세요。

AngularJS 모듈 AngularJS 테이블