1. Home
  2. ionic box

The best ionic box Tutorial In 2024, In this tutorial you can learn Examples,

ionic box

ionic box (checkbox) ordinary HTML check box makes no difference, the following example demonstrates ionic checkbox ion-checkbox applications. 

<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>

Examples

Example, depending on whether the check box is selected, modify checked value, true is selected, false unchecked.

HTML code 

<ion-header-bar class="bar-positive">
  <h1 class="title">复选框</h1>
</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">
      <div ng-bind="devList | json"></div> 
    </div>
    
    <div class="item item-divider"> 
      Notifications
    </div>
    
    <ion-checkbox ng-model="pushNotification.checked"
                  ng-change="pushNotificationChange()">
      Push Notifications
    </ion-checkbox>
    
    <div class="item">
      <div ng-bind="pushNotification | json"></div> 
    </div>
    
    <ion-checkbox ng-model="emailNotification"
                  ng-true-value="'Subscribed'"
                  ng-false-value="'Unubscribed'">
      Newsletter
    </ion-checkbox>
    <div class="item">
      <div ng-bind="emailNotification | json"></div> 
    </div>
    
  </div>
  
</ion-content>

JavaScript code 

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('/en/try/demo_source/finger.png'), auto;
}

The effect is as follows:

Hot Tools

Other Tools

Online Tutorial

Website Navigation

ionic box
10/30