AngularJS의 HTML DOM 지원 소개_AngularJS-JS 튜토리얼-php.cn

AngularJS의 HTML DOM 지원 소개_AngularJS

WBOY

풀어 주다： 2016-05-16 15:54:42

원래의

1154명이 탐색했습니다.

다음 지시문을 사용하여 HTML DOM 요소의 속성에 데이터 바인딩을 적용할 수 있습니다.

201561794017811.jpg (742×213)

HTML 버튼에 ng-show 속성을 추가하고 모델에 전달합니다. 모델을 확인란에 바인딩하고 다음 변경 사항을 확인하세요.

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

로그인 후 복사

ng-hide 명령

해당 모델을 통해 HTML 버튼에 ng-hide 속성을 추가합니다. 모델을 확인란에 바인딩하고 다음 변경 사항을 확인하세요.

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

로그인 후 복사

ng-클릭 명령

HTML 버튼에 ng-click 속성을 추가하고 모델을 업데이트하세요. 바인딩 변경 사항을 확인하기 위한 모델 바인딩 HTML입니다.

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

로그인 후 복사

예

다음 예에서는 위의 모든 명령을 보여줍니다.
testAngularJS.html

<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="">
<table border="0">
<tr>
  <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
  <td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
  <td><input type="checkbox" ng-model="showHide1">Show Button</td>
  <td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
  <td><input type="checkbox" ng-model="showHide2">Hide Button</td>
  <td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
  <td><p>Total click: {{ clickCounter }}</p></td>
  <td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

로그인 후 복사

출력

웹 브라우저에서 textAngularJS.html을 열고 다음 결과를 확인하세요.

201561794134891.png (694×337)