다음 지침은 HTML DOM 요소의 특성에 대한 응용 데이터 바인딩에 사용될 수 있습니다.
| S.No. | 이름 | 설명하다 |
|---|---|---|
| 1 | NG 장애 | 주어진 컨트롤을 비활성화합니다 |
| 2 | ng-show | 주어진 컨트롤을 보여줍니다 |
| 3 | NG-HIDE | 주어진 컨트롤에 숨기십시오 |
| 4 | NG 클릭 | AngularJS 클릭 이벤트를 나타냅니다 |
NG 장애인 명령
모델을 통해 NG 장애인 속성을 HTML 버튼에 추가하십시오. 모델은 다음 변경 사항을 확인하기 위해 확인란에 바인딩됩니다.
<input type = "checkbox"ng-model = "enabledisableButton"> 비활성화 버튼 <button ng disabled = "enabledisableButton"> 나를 클릭하십시오! </button>
NG-SHOW 명령
NG-SHOW 속성을 HTML 버튼에 추가하여 모델로 전달하십시오. 모델을 확인란에 바인딩하고 다음 변경 사항을 확인하십시오.
<input type = "checkbox"ng-model = "showhide1"> show button <button ng-show = "showhide1"> 클릭! </button>
Ng-Hide 명령
모델을 통해 NG-Hide 속성을 HTML 버튼으로 추가하십시오. 모델을 확인란에 바인딩하고 다음 변경 사항을 확인하십시오.
<input type = "checkbox"ng-model = "showhide2"> 숨기기 <버튼 ng-hide = "showhide2"> 나를 클릭하십시오!
ng- 클릭 명령
NG 클릭 속성을 HTML 버튼으로 추가하고 모델을 업데이트하십시오. 조합의 변화를보기 위해 HTML 모델 바인딩.
<p> 총 클릭 : {{clickCounter}} </p> </td> <버튼 ng-click = "clickCounter = clickCounter + 1"> 나를 클릭! </button>예
다음 예제는 위의 모든 지침을 보여줍니다.
testangularjs.html
<html> <head> <title> angularjs html dom </title> </head> <h2> Angularjs 샘플 애플리케이션 </h2> <div ng-app = "> <table> <tr> <td> <입력 유형 ="checkbox "ng-model ="enabledisablebutton "> <td> <td> <td> <td> ng-disabled = "enabledisablebutton"> 나를 클릭하십시오! </button> </td> </tr> <tr> <td> <입력 유형 = "Checkbox"ng-model = "showhide1"> show button ng-model = "showhide2"> 숨기기 버튼 </td> <td> <td> <button ng-hide = "showhide2"> 클릭을 클릭하십시오! </button> </td> </tr> <td> <p> Total Click : {{clickCounter} </p> </td> <td> <click ng click = "click counter ="clickcounter = "click counter 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을 열고 다음 결과를 확인하십시오.
위는 AngularJS HTML DOM 재료의 편집입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다!