Ionic Javascript表单

在本章中，我们将了解JavaScript表单是什么，并将了解JavaScript复选框，单选按钮和切换是什么。

使用Ionic复选框

让我们看看如何使用Ionic JavaScript复选框。首先，我们需要在HTML文件中创建一个 ion-checkbox 元素。在此内部，我们将分配一个将连接到角度 $ scope 的 ng-model 属性。您会注意到我们在定义模型的值时使用了一个点，即使它没有它也可以工作。这将允许我们始终保持子和父作用域之间的链接。

这非常重要，因为它有助于避免将来可能发生的一些问题。在我们创建元素之后，我们将使用角度表达式绑定其值。

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

接下来，我们需要为控制器内部的模型赋值。我们将使用的值是 错误的 ，因为我们要从未选中的复选框开始。

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

上面的代码将生成以下屏幕 -

Ionic复选框未选中

现在，当我们点击复选框元素时，它会自动将其模型值更改为 “true” ，如下面的屏幕截图所示。

Ionic复选框已选中

使用Ionic收音机

首先，我们应该在HTML中创建三个 Ionic无线电 元素，并为其分配 ng-model 和 ng-value 。之后，我们将使用角度表达式显示所选值。我们将首先取消选中所有三个放射性元素，因此不会将值分配给我们的屏幕。

<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未经检查

当我们点击第二个复选框元素时，该值将相应更改。

Ionic电台检查

使用Ionic切换

您会注意到切换类似于复选框。我们将按照与复选框相同的步骤操作。在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 赋值。因为，toggle使用布尔值，我们将 true 指定给第一个元素，将 false指定 给另外两个元素。

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

上面的代码将生成以下屏幕 -

Ionic切换混合

现在我们将点击第二个和第三个切换，向您展示值如何从false变为true。

Ionic切换检查