Ionic - Javascript Forms

In this chapter, area unit going to} perceive what JavaScript forms are and can learn what a JavaScript checkbox, radio buttons and toggle are.

Using ion-checkbox

we need to form associate ion-checkbox part within the hypertext markup language file. within this, we are going to assign associate ng-model attribute which will be connected to the angular $scope.You will notice that we have a tendency to ar employing a dot once process the worth of a model even if it might work while not it. This is vital because it helps to avoid some problems that would happen within the future. <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> we will use are false, since we want to start with unchecked checkboxes.
$scope.checkboxModel = {
   value1 : false,
   value2 : false
Now, when we tap the checkbox elements, it will automatically change their model value to “true” as shown in the following screenshot.

Using ion-radio

we should produce 3 ion-radio parts in our hypertext markup language and assign the ng-model and therefore the ng-value thereto. After that, we are going to show the chosen worth with angular expression. we are going to begin by unchecking all the 3 radioelements
<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>

Using ion-toggle

We will follow constant steps as we tend to did with our checkbox. within the hypertext markup language file, 1st we are going to produce ion-toggle components, then assign the ng-model worth and so bind expression values of to our read.
<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>
we will assign values to $scope.toggleModel in our controller. Since, toggle uses mathematician values, we are going to assign faithful the primary part and false to the opposite 2.
$scope.toggleModel = {
   value1 : true,
   value2 : false,
   value3 : false

Welookups is optimized for learning.© 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.