ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS を使用してラジオ ボタンとチェックボックスを処理する簡単な方法
AngularJS_AngularJS を使用してラジオ ボタンとチェックボックスを処理する簡単な方法
- WBOYオリジナル
- 2016-05-16 15:53:521166ブラウズ
AngularJS のフォーム処理は非常に単純です。 AngularJS がフォーム検証に双方向データ バインディングを使用すると、基本的にフォーム処理に役立ちます。
チェックボックスの使用例はたくさんあり、それに対処する方法もたくさんあります。この記事では、チェックボックスとラジオ ボタンをデータ変数にバインドする方法と、それを使用して何ができるかを見ていきます。
Angular フォームの作成
この記事では、index.html と app.js の 2 つのファイルが必要です。 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 }}