Search This Blog

Sunday 20 March 2016

toggle buttons with ionic

ionic is for mobile apps and toggle button is a common control which is widely used for yes/no, select/unselect purposes. lets see how to use it.

ionic has a tag called, ion-toggle which is used for showing and handling toggle button events. use this in your html:

<ion-toggle ng-model="checked" 
ng-change="TogglePanel(checked)" class="TransparentBG">
<span ng-class="DynHubStatus" class="CategoryTitle">Air</span>
</ion-toggle>

ng-model: checked is to set true or false
ng-change triggers change event and TogglePanel function will be called on change
by default it comes with white background, use css to change that.
in code behind:
$scope.TogglePanel = function(toStatus){
   //use the event to perform your required events.
}

ng-model checked will be set to true on turning on and to false on turning off the button

No comments:

Post a Comment