AngularJS 형식
AngularJS 양식은 입력 컨트롤 모음입니다.
HTML 컨트롤
다음 HTML 입력 요소를 HTML 컨트롤이라고 합니다.
input 요소
select 요소
button 요소
textarea 요소
HTML 양식
HTML 양식은 HTML 컨트롤과 함께 존재하는 경우가 많습니다.
AngularJS 양식 인스턴스
Instance
<!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="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>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
 | 검증하지 않음 속성은 HTML5의 New에 있습니다. 브라우저의 기본 인증을 사용하여 비활성화되었습니다. |
|---|
Instance parsing
ng-app 지시문은 AngularJS 애플리케이션을 정의합니다.
ng-controller 지시어는 애플리케이션 컨트롤러를 정의합니다.
ng-model 지시문은 두 개의 입력 요소를 모델의 user 개체에 바인딩합니다.
formCtrl 함수는 master 개체의 초기 값을 설정하고 reset() 메서드를 정의합니다.
reset() 메서드는 user 개체를 master 개체와 동일하게 설정합니다.
ng-click 명령은 reset() 메서드를 호출하고 버튼을 클릭할 때 호출됩니다.
novalidate 속성은 애플리케이션에 필요하지 않지만 표준 HTML5 유효성 검사를 재정의하려면 AngularJS 양식에서 이를 사용해야 합니다.
