AngularJS와의 양식은 데이터 바인딩 및 입력 컨트롤의 유효성 검사를 제공합니다.
입력 컨트롤
입력 컨트롤은 HTML 입력 요소 :
- 입력 요소
- 선택 요소
- 버튼 요소
- 텍스트 영역 요소
데이터 바인딩
입력 컨트롤은 사용하여 데이터 바인딩 제공 ng-model 지시문을.
<input type="text" ng-model="firstname">
이제 응용 프로그램이라는 속성이 있습니까 firstname .
ng-model 지시어는 응용 프로그램의 나머지 부분에 입력 컨트롤러를 결합한다.
속성 firstname , 컨트롤러에서 참조 할 수 있습니다 :
예
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> »그것을 자신을 시도 또한, 다른 어플리케이션에서 참조 할 수있다 :
예
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
»그것을 자신을 시도 확인란
체크 박스는 값이 true 또는 false . 적용 ng-model 체크 박스에 지시를하고 응용 프로그램에서의 값을 사용합니다.
예
확인란이 선택된 경우 헤더보기 :
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
»그것을 자신을 시도 라디오 버튼
사용하여 응용 프로그램에 바인딩 라디오 버튼 ng-model 지시어.
동일한 라디오 버튼 ng-model 서로 다른 값을 가질 수 있지만 단지 선택된 하나를 사용한다.
예
선택된 라디오 버튼의 값에 기초하여 텍스트를 표시 :
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
»그것을 자신을 시도 myVar에의 값이 될 것이다 dogs , tuts , 또는 cars .
선택 박스
와 응용 프로그램에 선택 상자를 바인딩 ng-model 지시어.
에 정의 속성 ng-model 속성은 선택 박스에서 선택된 옵션 값을 가질 것이다.
예
선택된 옵션의 값에 기초하여 텍스트를 표시 :
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
»그것을 자신을 시도 myVar에의 값이 될 것이다 dogs , tuts , 또는 cars .
AngularJS와 양식 예
형태 = {{사용자}}
마스터 = {{주}}
응용 프로그램 코드
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{ user}}</p>
<p>master = {{ master}}</p>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
»그것을 자신을 시도  | NOVALIDATE 속성은 HTML5의 새로운 기능입니다. 그것은 어떤 기본 브라우저 유효성 검사를 사용하지 않습니다. |
|---|
예 설명
NG-앱 지시어는 AngularJS와 응용 프로그램을 정의합니다.
NG 컨트롤러 지시어는 응용 프로그램 컨트롤러를 정의합니다.
NG 모델 지시어는 모델의 사용자 개체에 두 개의 입력 요소를 결합한다.
formCtrl 제어기는 마스터 객체에 초기 값을 설정하고, 초기화 () 메소드를 정의한다.
리셋 () 메소드는 마스터 오브젝트와 동일한 사용자 개체를 설정합니다.
NG 클릭 지시문은 버튼을 클릭 할 경우에만 리셋 () 메서드를 호출합니다.
NOVALIDATE 속성이 응용 프로그램에 필요하지 않고, 일반적으로 당신은 표준 HTML5 유효성 검사를 오버라이드 (override), AngularJS와 양식에 사용됩니다.