Ionic-Javascriptフォーム

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

イオンチェックボックスの使用

IonicJavaScriptチェックボックスの使用方法を見てみましょう。まず、作成する必要がありますion-checkboxHTMLファイルの要素。この中で、ng-model 角度に接続される属性 $scope。あなたは私たちが使用していることに気付くでしょう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” 次のスクリーンショットに示すように。

イオンラジオの使用

まず、3つ作成する必要があります ion-radio HTMLの要素を割り当て、 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 valueを実行してから、の式の値をビューにバインドします。

<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 最初の要素に false 他の2つに。

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

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

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