Ionic checkbox

From WikiOD

ionic checkbox[edit | edit source]

The ionic checkbox (checkbox) is no different from the normal HTML checkbox. The following example demonstrates the application of the ionic checkbox ion-checkbox.

 <ion-checkbox ng-model="isChecked">Checkbox label</ion-checkbox>

Instance[edit | edit source]

In the example, the checked value will be modified according to whether the check box is selected, true is selected, and false is not selected.

HTML code[edit | edit source]
 <ion-header-bar class="bar-positive">

   <code><h1 class="title">checkbox</h1></code>

 </ion-header-bar>

 <ion-content>
<div class="list">
    <ion-checkbox ng-repeat="item in devList"
                  ng-model="item.checked" 
                  ng-checked="item.checked">
      {{item.text }}
    </ion-checkbox>
    
<div class="item item-divider">
      Notifications
</div>
    <ion-checkbox ng-model="pushNotification.checked"
                  ng-change="pushNotificationChange()">
      Push Notifications
    </ion-checkbox>
    

    <ion-checkbox ng-model="emailNotification"
                  ng-true-value="'Subscribed'"
                  ng-false-value="'Unubscribed'">
      Newsletter
    </ion-checkbox>
</div>
 </ion-content>
JavaScript code[edit | edit source]
 angular.module('starter', ['ionic'])

 .run(function($ionicPlatform) { $ionicPlatform.ready(function() {

  // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  // for form inputs)
  if(window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  }
  if(window.StatusBar) {
    StatusBar.styleDefault();
  }

 });

  })

 .controller('actionsheetCtl',['$scope',function($scope){

  $scope.devList = [
      {text: "HTML5", checked: true },
      {text: "CSS3", checked: false },
      {text: "JavaScript", 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.phpxs.com/try/demo_source/finger.png'), auto;

 }