Ionic-js-forms
イオン-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
};上記のコードは、次の画面を生成します-
これで、チェックボックス要素をタップすると、次のスクリーンショットに示すように、モデル値が自動的に*“ true” *に変更されます。
イオンラジオを使用する
まず、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>上記のコードは、次の画面を生成します-
2番目のチェックボックス要素をタップすると、それに応じて値が変更されます。
イオントグルを使用する
トグルはチェックボックスに似ていることがわかります。 チェックボックスで行ったのと同じ手順に従います。 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
};上記のコードは、次の画面を生成します-
次に、2番目と3番目のトグルをタップして、値がfalseからtrueに変化する様子を示します。
