Ionic Toggle Switch Operation

In the following example, different values are displayed based on the toggle switch state, where true indicates "on" and false indicates "off".

HTML Code

<ion-header-bar class="bar-positive">
  <h1 class="title">Toggle Switch</h1>
</ion-header-bar>

<ion-content>

  <div class="list">

    <div class="item item-divider"> 
      Settings
    </div>

    &lt;ion-toggle ng-repeat="item in settingsList"
                ng-model="item.checked" 
                ng-checked="item.checked">
      {{ item.text }}
    </ion-toggle>

    <div class="item">
        <!-- Using div tag for better display -->
      <div ng-bind="settingsList | json"></div> 
    </div>

    <div class="item item-divider"> 
      Notifications
    </div>

    &lt;ion-toggle ng-model="pushNotification.checked"
                ng-change="pushNotificationChange()">
      Push Notifications
    </ion-toggle>

    <div class="item">
        <!-- Using div tag for better display -->
      <div ng-bind="pushNotification | json"></div> 
    </div>

    &lt;ion-toggle toggle-class="toggle-assertive"
                ng-model="emailNotification"
                ng-true-value="'Subscribed'"
                ng-false-value="'Unsubscribed'">
      Newsletter
    </ion-toggle>

    <div class="item">
        <!-- Using div tag for better display -->
      <div ng-bind="emailNotification | json"></div> 
    </div>

  </div>

</ion-content>

Due to conflicts with the pre tag, the pre tags in the example have been replaced with div tags. You can view the specifics in the "Try It Yourself" section.

JavaScript Code

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {

  $scope.settingsList = [
    { text: "Wireless", checked: true },
    { text: "GPS", checked: false },
    { text: "Bluetooth", checked: false }
  ];

  $scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };

  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';

});

CSS Code:

body {
  cursor: url('http://www.tutorialpro.org/try/demo_source/finger.png'), auto;
}

Try It Yourself »

The effect is as shown below: