Hello Readers,

Ionic Framework provides some form inputs. These are same as HTML inputs but their styling is different from HTML inputs and we can customize them as required. Forms inputs in Ionic Framework are as follows:

1. ion-checkbox : These checkboxes are same as HTML checkboxes but we can customize them as required and they behave like Angularjs  checkboxes.

Example :

index.html

<ion-view view-title="ion-checkbox Example">
    <ion-content class="has-header">
        <ion-checkbox ng-repeat="item in items" 
                      ng-model="isChecked" 
                      ng-change="checkedValue(isChecked)">
            <p>Item: {{item}}</p>
        </ion-checkbox>
    </ion-content>
</ion-view>

controller.js

$scope.items = [];
for (var i = 0; i < 10; i++) 
{
    $scope.items.push(i);
}
$scope.checkedValue = function(e)
{
    alert("checked value is:" +e);
}

In the above code we are getting the check value from the checkboxed i.e the value can be true/false.

2. ion-radio :  radio directive is same as HTML radio input but ion-radio directive are different in styling and easily customized.

Example :

Index.html

<ion-view view-title="ion-radio Example">
    <ion-content class="has-header">
        <ion-radio ng-repeat="item in items" ng-value="item" 
                   ng-model="item" ng-click="itemsValue(item)">
            {{ item }}
        </ion-radio>
    </ion-content>
</ion-view>

controller.js

$scope.items = [];
for (var i = 0; i < 10; i++) 
{
    $scope.items.push(i);
}
$scope.itemsValue = function(e)
{
    alert("item value: "+e);
}

In the above example we are getting item value using ng-click directive.

3. ion-toggle :  Toggle is an animated switch which binds model to a boolean. ion-toggle directive is very smooth and easily customizable input.

Example:

index.html

<ion-view view-title="ion-toggle Example">
    <ion-content class="has-header">
        <ion-toggle ng-repeat="item in items" ng-model="item" 
                    ng-click="switchValue(item)">
            {{ item }}
        </ion-toggle>
    </ion-content>
</ion-view>

controller.js

$scope.items = [];
for (var i = 0; i < 10; i++) 
{
    $scope.items.push(i);
}
$scope.switchValue = function(e)
{
    alert(e);
}

In the above example we are getting toggle value in true or false format. ion-toogle directive behaves like any angularjs checkbox but ion-toggle directives are easy to customize.

Hope this will help you.... :)