AngularJS 이벤트
AngularJS에는 자체 HTML 이벤트 지침이 있습니다.
ng- 클릭 명령
NG 클릭 지시문은 AngularJS 클릭 이벤트를 정의합니다.
AngularJS 인스턴스
<! 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 = "myapp" ng-controller = "myctrl"> <button ng-click = "count = count + 1"> 나를 클릭하십시오! </button> <p> {{count}} </p> </div> <cript> var app = angular.module ( 'myApp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.count = 0;}); </script> </html>실행 효과 :
0
HTML 요소를 숨기십시오
NG-Hide 지시문은 응용 프로그램 부분이 보이는지 여부를 설정하는 데 사용됩니다.
ng-hide = "true"는 HTML 요소가 보이지 않도록 설정합니다.
ng-hide = "false"는 HTML 요소를 볼 수 있도록 설정합니다.
AngularJS 인스턴스
<! 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 = "myapp" ng-controller = "personctrl"> <button ng-click = "toggle ()"> hide/show </show> <p ng-hide = "myvar"> name : <input type = text ng-model = "FirstName"> <br> 이름 : <input type = text ng-model = "lastname"> <br> 이름 <br> {{{input type = "textname"> <br> LastName}} </p> </div> <cript> var app = angular.module ( 'myApp', []); app.Controller ( 'personCtrl', function ($ scope) {$ scope.firstName = "John"; $ scope.lastname = "doe"; $ scope.myvar = fally; $ scope.Toggle. =! $ scope.myvar;}); </script> </body> </html>실행 결과 :
이름:
성:
이름 : John Doe
응용 프로그램 분석 :
PersonController의 첫 번째 부분은 컨트롤러 장과 유사합니다.
응용 프로그램에는 기본 속성이 있습니다. $ scope.myvar = false;
NG-Hide 지시문은 <p> 요소와 두 입력 필드가 보이는지 여부를 설정하고 Myvar의 값 (참 또는 거짓)에 따라 볼 수 있는지 여부를 설정합니다.
toggle () 함수는 myvar 변수 (true 및 false)의 값을 전환하는 데 사용됩니다.
ng-hide = "true"는 요소를 보이지 않습니다.
HTML 요소를 표시합니다
NG-SHOW 지침은 응용 프로그램의 일부가 보이는지 여부를 설정하는 데 사용될 수 있습니다.
ng-show = "false"는 HTML 요소를 보이지 않게 설정할 수 있습니다.
ng-show = "true"는 HTML 요소로 볼 수 있도록 설정할 수 있습니다.
다음 예제는 NG-SHOW 지침을 사용합니다.
AngularJS 인스턴스
<! 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 = "myapp" ng-controller = "personctrl"> <button ng-click = "toggle ()"> hide/show </show> <p ng-show = "myvar"> name : <input type = text ng-model = "person.firstname"> <br> name : <input type = ng-model = "person.lastname"> <br> {{person.firstname + "" + person.lastname}}} </p> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'personctrl', function ($ scope) {$ scope.person = {John ", lastname :"$}; $ scope. "}; $ scope.toggle = function () {$ scope.myvar =! $ scope.myvar;}); </script> </body> </html>실행 결과 :
이름:
성:
이름 : John Doe
위는 AngularJS 이벤트 정보의 편집입니다. 나중에 계속 추가 할 것입니다. 도움이 필요한 친구들의 참조.