AngularJSでラジオボタンとチェックボックスを処理する簡単な方法

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

AngularJSはフォームを非常に簡単に処理します。 AngularJSがフォームの検証に双方向データバインディングを使用する場合、AngularJSは本質的にフォーム処理を処理します。

チェックボックスを使用する例はたくさんあり、それらを処理する方法はたくさんあります。 この記事では、チェックボックスとラジオボタンをデータ変数にバインドする方法と、それらをどのように処理するかを見ていきます。

Angularフォームを作成する

この記事では、index.htmlとapp.jsという2つのファイルが必要です。 App.jsはすべての角型コードを保存するのに使われています(大きくはありません)。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 = {};
});

このファイルでは、角度アプリを作成するだけです。 すべてのフォームデータを保持するコントローラとオブジェクトも作成しました。

フォームを作成してデータバインディングを行ったindex.htmlファイルを見てみましょう。 ブートストラップを使用してページをすばやくレイアウトしました。


<- 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>
{{ formData }}
</pre>
</div>
</body>
</html>

作成が完了すると、名前が入力されたフォームが表示されます。 すべてが意図どおりに機能していれば、名前入力を入力すると、下の<pre>タグセクションに入力が表示されます。

チェックボックス

フォームでは、チェックボックスが非常に一般的です。 以下では、AngularがデータバインディングにngModelを使用する方法を見ていきます。 多くのチェックボックスがある場合、オブジェクトにバインドするときにデータ処理を行う方法が圧倒的になることがあります。

作成したformDataオブジェクトの中に、別のオブジェクトも作成しました。 好みの色を選択するようにユーザーに求めているfavoriteColorsという名前を付けます。


<!- MULTIPLE CHECKBOXES ->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>

ユーザーが上記のいずれかのチェックボックスをクリックすると、formDataオブジェクトが変更されたことがすぐにわかります。 チェックボックスの値をfromData.favoriteColorsオブジェクトに格納します。 そこで、チェックボックスの値をサーバーに渡します。

チェックボックスのクリック処理

時には、誰かがチェックボックスをクリックすると、それを処理する必要があります。 必要な処理は、値の計算、一部の変数の変更、またはデータバインドの実行のようなものです。 これを行うには、$ scope.yourFunction = function(){};を使用してapp.js内に関数を作成します。 次に、チェックボックスでng-click = "yourFunction()"を使用してこの関数を呼び出すことができます。

フォームチェックボックスを扱う方法はたくさんありますが、Angularはng-clickでユーザ定義関数を呼び出す非常に簡単な方法を提供します。

カスタムチェックボックスの対応値

デフォルトでは、チェックボックスにバインドされている値はtrueまたはfalseです。 他の値を返すことが必要な場合もあります。 Angularは、ng-ture-valueとng-false-valueを使用して、それを処理する非常に良い方法を提供します。

もう1組のチェックボックスを追加しますが、この時点ではtrueまたはfalseではなくユーザー定義の値を使用します。


<!- CUSTOM VALUE CHECKBOXES ->
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
Are you awesome?
</label>
</div>

また、formDataオブジェクトにすばらしい変数を追加しました。 この時点でこの値がtrueに設定されている場合、返される値はofCourseでなければなりません。falseに設定されていれば、戻り値はiWishです。

チェックボックス

公式の文書によると、これはラジオボタンとは異なります:


<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">

チェックボックスの詳細については、 角度チェックボックスのドキュメントに従ってください。
ラジオボタン

ラジオボタンはチェックボックスより簡単ですので、複数のオプションデータを保存する必要はありません。シングルは値です。


<!- RADIO BUTTONS ->
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
Egg
</label>
</div>
</div>

このようにラジオボタンはデータオブジェクトにバインドされています。

ラジオボタンの使用法

公式の文書によると、これは提供されるオプションです:


<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ