イオン-Javascriptフォーム

この章では、JavaScriptフォームとは何かを理解し、JavaScriptチェックボックス、ラジオボタン、トグルとは何かを学びます。

イオンチェックボックスを使用する

Ionic JavaScriptチェックボックスの使用方法を見てみましょう。まず、HTMLファイルに ion-checkbox 要素を作成する必要があります。この中で、角度のある$$ scope に接続される *ng-model 属性を割り当てます。モデルの値を定義するときに、それがなくても機能する場合でも dot を使用していることに気付くでしょう。これにより、常に子スコープと親スコープ間のリンクを維持できます。

これは、将来発生する可能性のある問題を回避するのに役立つため、非常に重要です。要素を作成したら、角度式を使用してその値をバインドします。

<ion-checkbox ng-model = "checkboxModel.value1">Checkbox 1</ion-checkbox>
<ion-checkbox ng-model = "checkboxModel.value2">Checkbox 2</ion-checkbox>

<p>Checkbox 1 value is: <b>{{checkboxModel.value1}}</b></p>
<p>Checkbox 2 value is: <b>{{checkboxModel.value2}}</b></p>

次に、コントローラー内のモデルに値を割り当てる必要があります。未使用のチェックボックスから開始するため、使用する値は false です。

$scope.checkboxModel = {
   value1 : false,
   value2 : false
};

上記のコードは、次の画面を生成します-

Ionic Checkbox Unchecked

これで、チェックボックス要素をタップすると、次のスクリーンショットに示すように、モデル値が自動的に*“ true” *に変更されます。

Ionic Checkbox checked

イオンラジオを使用する

まず、HTMLに3つの ion-radio 要素を作成し、それに ng-model と ng-value を割り当てる必要があります。その後、選択した値を角度式で表示します。 3つの放射性要素すべてのチェックを外すことから始めて、値が画面に割り当てられないようにします。

<ion-radio ng-model = "radioModel.value" ng-value = "1">Radio 1</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "2">Radio 2</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "3">Radio 3</ion-radio>

<p>Radio value is: <b>{{radioModel.value}}</b></p>

上記のコードは、次の画面を生成します-

Ionic Radio unchecked

2番目のチェックボックス要素をタップすると、それに応じて値が変更されます。

Ionic Radioチェック

イオントグルを使用する

トグルはチェックボックスに似ていることがわかります。チェックボックスで行ったのと同じ手順に従います。 HTMLファイルでは、まず ion-toggle 要素を作成し、次に ng-model 値を割り当ててから、式の値をビューにバインドします。

<ion-toggle ng-model = "toggleModel.value1">Toggle 1</ion-toggle>
<ion-toggle ng-model = "toggleModel.value2">Toggle 2</ion-toggle>
<ion-toggle ng-model = "toggleModel.value3">Toggle 3</ion-toggle>

<p>Toggle value 1 is: <b>{{toggleModel.value1}}</b></p>
<p>Toggle value 2 is: <b>{{toggleModel.value2}}</b></p>
<p>Toggle value 3 is: <b>{{toggleModel.value3}}</b></p>

次に、コントローラーの $ scope.toggleModel に値を割り当てます。トグルはブール値を使用するため、最初の要素に true を割り当て、他の2つの要素に false を割り当てます。

$scope.toggleModel = {
   value1 : true,
   value2 : false,
   value3 : false
};

上記のコードは、次の画面を生成します-

Ionic Toggle Mixed

次に、2番目と3番目のトグルをタップして、値がfalseからtrueに変化する様子を示します。

Ionic Toggle Checked

Ionic-js-forms

イオン-Javascriptフォーム

イオンチェックボックスを使用する

イオンラジオを使用する

イオントグルを使用する

目次