AngularJS와 형태
AngularJS와 양식 입력 컬렉션을 제어합니다.
HTML 컨트롤
다음 HTML 입력 요소는 HTML 컨트롤이라고합니다 :
- 입력 요소
- 선택 요소
- 버튼 요소
- 텍스트 영역 요소
HTML 양식
HTML 컨트롤과 HTML 양식은 종종 공존.
AngularJS와 형태의 인스턴스
형태 = {{사용자}}
마스터 = {{주}}
응용 프로그램 코드
<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "formCtrl">
<양식 NOVALIDATE>
이름 :로 <br>
<입력 유형 = "텍스트"NG -Model = "user.firstName">로 <br>
성 :로 <br>
<입력 유형 = "텍스트"NG -Model = "user.lastName">
<br> <br> 가상
<버튼 "재설정 = NG는 클릭 ()"> 초기화 </ 버튼>
</ FORM>
사용자}} </ P>
주}} </ P>
</ DIV>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'formCtrl', 기능 ($ 범위) {
$ Scope.master = {firstName을 "존"과 lastName "미상"};
$ Scope.reset = 함수 () {
$ Scope.user = angular.copy ($의 scope.master);
};
$ Scope.reset ();
});
</ 스크립트>
<양식 NOVALIDATE>
이름 :로 <br>
<입력 유형 = "텍스트"NG -Model = "user.firstName">로 <br>
성 :로 <br>
<입력 유형 = "텍스트"NG -Model = "user.lastName">
<br> <br> 가상
<버튼 "재설정 = NG는 클릭 ()"> 초기화 </ 버튼>
</ FORM>
사용자}} </ P>
주}} </ P>
</ DIV>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'formCtrl', 기능 ($ 범위) {
$ Scope.master = {firstName을 "존"과 lastName "미상"};
$ Scope.reset = 함수 () {
$ Scope.user = angular.copy ($의 scope.master);
};
$ Scope.reset ();
});
</ 스크립트>
»시도
 | NOVALIDATE 속성에서 HTML5의 새로운 기능입니다. 안 기본 인증 브라우저를 사용한다. |
|---|
분석의 예
NG-앱 지시어는 AngularJS와 응용 프로그램을 정의합니다.
NG 컨트롤러 지시어는 응용 프로그램 컨트롤러를 정의합니다.
NG 모델 지시자는 사용자 객체 모델에 대한 두 개의 입력 요소를 결합한다.
formCtrl 함수 마스터 개체의 초기 값을 설정하고, 초기화 () 메소드를 정의한다.
재설정 () 메소드는 사용자 개체가 마스터 오브젝트와 동일한 설정합니다.
명령이라고 reset () 메소드를 NG를 클릭하고 통화 버튼을 클릭합니다.
응용 프로그램의 NOVALIDATE 속성은 필요하지 않습니다,하지만 당신은 표준 HTML5 유효성 검사를 다시 쓰기 위해, AngularJS와 양식을 사용해야합니다.