ionic 切换开关操作

以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。

HTML 代码

<ion-header-bar>
  <h1>开关切换</h1>
</ion-header-bar>
         
<ion-content>
  
  <div>
    
    <div> 
      Settings
    </div>
    
    <ion-toggle ng-repeat=\"item in settingsList\"
                ng-model=\"item.checked\" 
                ng-checked=\"item.checked\">
      {{ item.text }}
    </ion-toggle>
    
    <div>
        <!-- 使用 pre 标签展示效果更美观 -->
      <div ng-bind=\"settingsList | json\"></div> 
    </div>
    
    <div> 
      Notifications
    </div>
    
    <ion-toggle ng-model=\"pushNotification.checked\"
                ng-change=\"pushNotificationChange()\">
      Push Notifications
    </ion-toggle>
    
    <div>
        <!-- 使用 pre 标签展示效果更美观 -->
      <div ng-bind=\"pushNotification | json\"></div> 
    </div>
    
    <ion-toggle toggle-class=\"toggle-assertive\"
                ng-model=\"emailNotification\"
                ng-true-value=\"\'Subscribed\'\"
                ng-false-value=\"\'Unubscribed\'\">
      Newsletter
    </ion-toggle>
    
    <div>
        <!-- 使用 pre 标签展示效果更美观 -->
      <div ng-bind=\"emailNotification | json\"></div> 
    </div>
    
  </div>
  
</ion-content>

由于pre标签冲突，实例中的 pre 已替换为 div标签，具体可以在\”尝试一下\”中查看。

JavaScript 代码

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 代码：

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

效果如下所示：