AngularJS 양식

❮ 이전의 다음 ❯

AngularJS의 양식은 입력 컨트롤의 데이터 바인딩 및 유효성 검사를 제공합니다.

입력 컨트롤

입력 컨트롤은 HTML 입력 요소입니다.

입력 요소
요소 선택
버튼 요소
텍스트 영역 요소

데이터 바인딩

입력 제어는 ng-model지시문을 사용하여 데이터 바인딩을 제공합니다.

이제 응용 프로그램에 이라는 속성이 firstname있습니다.

이 ng-model지시문은 입력 컨트롤러를 애플리케이션의 나머지 부분에 바인딩합니다.

속성 firstname은 컨트롤러에서 참조할 수 있습니다.

예시

응용 프로그램의 다른 곳에서 참조할 수도 있습니다.

예시

<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 양식 예제

양식 = {"firstName":"John","lastName":"Doe"}

마스터 = {"firstName":"John","lastName":"Doe"}

애플리케이션 코드

<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-app 지시문 은 AngularJS 애플리케이션을 정의합니다.

ng-controller 지시문은 애플리케이션 컨트롤러를 정의합니다 .

ng-model 지시문은 두 개의 입력 요소를 모델의 사용자 개체 에 바인딩합니다.

formCtrl 컨트롤러 는 마스터 객체에 초기 값을 설정 하고 reset() 메서드를 정의합니다.

reset() 메서드는 사용자 개체 를 마스터 개체 와 동일하게 설정 합니다.

ng-click 지시문은 버튼 을 클릭한 경우에만 reset() 메서드를 호출합니다.

이 응용 프로그램에는 novalidate 속성이 필요하지 않지만 일반적으로 표준 HTML5 유효성 검사를 재정의하기 위해 AngularJS 형식에서 사용합니다.