AngularJS의 양식 처리는 매우 간단합니다. AngularJS가 양식 유효성 검사를 위해 양방향 데이터 바인딩을 사용하면 본질적으로 양식 처리에 도움이 됩니다.
체크박스를 사용하는 예는 많고 이를 처리할 수 있는 방법도 많습니다. 이 글에서는 체크박스와 라디오 버튼을 데이터 변수에 바인딩하는 방법과 이를 통해 무엇을 할 수 있는지 살펴보겠습니다.
Angular 형태 만들기
이 기사에는 index.html과 app.js라는 두 개의 파일이 필요합니다. app.js는 모든 Angular 코드가 보관되는 곳이고(크지는 않음) index.html은 작업이 실행되는 곳입니다. 먼저 AngularJS 파일을 만듭니다.
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
});
이 파일에서 우리가 하는 일은 Angular 애플리케이션을 만드는 것뿐입니다. 또한 모든 양식 데이터를 보유하는 컨트롤러와 개체를 만들었습니다.
index.html 파일을 살펴보겠습니다. 이 파일에서는 폼을 생성한 후 데이터 바인딩을 수행합니다. 우리는 페이지 레이아웃을 빠르게 하기 위해 Bootstrap을 사용했습니다.
<-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes and Radio Buttons</h2>
<form>
<!-- NAME INPUT -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<!-- =============================================== -->
<!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
<!-- =============================================== -->
<!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
</form>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Sample Form Object</h2>
<pre class="brush:php;toolbar:false">
{{ formData }}