AngularJS_AngularJS를 사용하여 라디오 버튼과 체크박스를 처리하는 간단한 방법
angularjs
형태
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 }}