Ionic - JavaScript 表單

在本章中，我們將瞭解什麼是 JavaScript 表單，並將學習什麼是 JavaScript 複選框、單選按鈕和切換按鈕。

使用 ion-checkbox

讓我們看看如何使用 Ionic JavaScript 複選框。首先，我們需要在 HTML 檔案中建立一個ion-checkbox元素。在其中，我們將分配一個ng-model屬性，該屬性將連線到 Angular 的$scope。您會注意到，即使沒有它也可以工作，我們仍在定義模型值時使用點。這將使我們能夠始終保持子作用域和父作用域之間的連結。

這非常重要，因為它有助於避免將來可能發生的一些問題。建立元素後，我們將使用 Angular 表示式繫結其值。

<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”，如下面的螢幕截圖所示。

使用 ion-radio

首先，我們應該在 HTML 中建立三個ion-radio元素，併為其分配ng-model和ng-value。之後，我們將使用 Angular 表示式顯示所選值。我們將從取消選中所有三個單選元素開始，因此值不會分配到我們的螢幕上。

<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>

以上程式碼將生成以下螢幕 -

當我們點選第二個複選框元素時，值將相應更改。

使用 ion-toggle

您會注意到切換按鈕類似於複選框。我們將遵循與複選框相同的步驟。在 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，為其他兩個元素分配false。

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

以上程式碼將生成以下螢幕 -

現在我們將點選第二個和第三個切換按鈕，向您展示值如何從 false 更改為 true。