AngularJS와 이벤트
AngularJS와 HTML 이벤트는 자신의 명령이 있습니다.
NG 클릭 명령
NG 클릭 지시어는 AngularJS와 이벤트를 클릭하여 정의합니다.
예를 AngularJS와
<사업부의 NG-응용 프로그램 = "" NG 컨트롤러 = "myCtrl">
<버튼 NG 클릭 "계산 = + 1을 계산 ="> 나 포인트! </ 버튼>
<P> {{수}} </ P>
</ DIV>
<버튼 NG 클릭 "계산 = + 1을 계산 ="> 나 포인트! </ 버튼>
<P> {{수}} </ P>
</ DIV>
»시도
HTML 요소를 숨기기
NG 숨기기 지시어는 응용 프로그램의 일부가 보이는 설정합니다.
NG 숨기기 = "true"로 설정 HTML 요소는 표시되지 않습니다.
NG 숨기기 = "false"로 설정 HTML 요소를 볼 수 있습니다.
예를 AngularJS와
<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "personCtrl">
<버튼 = "토글 NG는 클릭 ()">> 숨기기 / 표시 </ 버튼>
<P NG 숨기기 = "myVar에 ">
이름 : <입력 유형 = "텍스트" NG 모델 = "firstName을">로 <br>
이름 : <입력 유형 = "텍스트" NG 모델 = "이 lastName">로 <br>
로 <br>
전체 이름 : {{firstName을 + " "+이 lastName}}
</ P>
</ DIV>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'personCtrl', 기능 ($ 범위) {
$ Scope.firstName = "존",
$ Scope.lastName = "미상"
$ Scope.myVar = 거짓;
$ Scope.toggle = 함수 () {
! $ Scope.myVar = $ scope.myVar;
};
});
</ 스크립트>
<버튼 = "토글 NG는 클릭 ()">> 숨기기 / 표시 </ 버튼>
<P NG 숨기기 = "myVar에 ">
이름 : <입력 유형 = "텍스트" NG 모델 = "firstName을">로 <br>
이름 : <입력 유형 = "텍스트" NG 모델 = "이 lastName">로 <br>
로 <br>
전체 이름 : {{firstName을 + " "+이 lastName}}
</ P>
</ DIV>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'personCtrl', 기능 ($ 범위) {
$ Scope.firstName = "존",
$ Scope.lastName = "미상"
$ Scope.myVar = 거짓;
$ Scope.toggle = 함수 () {
! $ Scope.myVar = $ scope.myVar;
};
});
</ 스크립트>
»시도
애플리케이션 분석 :
비슷한 첫 번째 부분의 personController 컨트롤러 섹션.
$ scope.myVar을 = 거짓; 응용 프로그램은 기본 속성이
NG 숨기기 명령어 세트 <P> 요소와 두 개의 입력 필드 myVar에의 값에 따라 볼 수 있습니다 (true 또는 false) 세트를 볼 수 있습니다.
토글 () 함수는 myVar에 변수 (true 및 false)의 값을 전환하는 데 사용됩니다.
NG 숨기기 해당 요소가 표시되지 않도록 = "true"로.
디스플레이 HTML 요소
NG 쇼 명령은 가시광의인가 부 여부를 설정하는데 사용될 수있다.
NG 쇼 = "false"를 사용자가 설정할 수있는 HTML 요소는 표시되지 않습니다.
NG 쇼 = "true"로 HTML 요소를 볼 수 설정할 수 있습니다.
다음의 예는 NG-show 명령을 사용합니다 :
예를 AngularJS와
<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "personCtrl">
<버튼 = "토글 NG는 클릭 ()"> 숨기기 / 표시 </ 버튼>
<P NG 쇼 = "myVar에 ">
이름 : <입력 유형 = "텍스트" NG 모델 = "firstName을">로 <br>
성 : <입력 유형 = "텍스트" NG 모델 = "이 lastName">로 <br>
로 <br>
이름 : {{firstName을 + ""+ 이 lastName}}
</ P>
</ DIV>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'personCtrl', 기능 ($ 범위) {
$ Scope.firstName = "존",
$ Scope.lastName = "미상"
$ Scope.myVar 사실 =;
$ Scope.toggle = 함수 () {
! $ Scope.myVar = $ scope.myVar;
}
});
</ 스크립트>
<버튼 = "토글 NG는 클릭 ()"> 숨기기 / 표시 </ 버튼>
<P NG 쇼 = "myVar에 ">
이름 : <입력 유형 = "텍스트" NG 모델 = "firstName을">로 <br>
성 : <입력 유형 = "텍스트" NG 모델 = "이 lastName">로 <br>
로 <br>
이름 : {{firstName을 + ""+ 이 lastName}}
</ P>
</ DIV>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'personCtrl', 기능 ($ 범위) {
$ Scope.firstName = "존",
$ Scope.lastName = "미상"
$ Scope.myVar 사실 =;
$ Scope.toggle = 함수 () {
! $ Scope.myVar = $ scope.myVar;
}
});
</ 스크립트>
»시도