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。