首页 » ionic » ionic JavaScript
网站地图

ionic 复选框

ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。

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

实例

实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false 为未选中。

HTML 代码

  1. <ion-header-bar class="bar-positive">
  2.   <h1 class="title">复选框</h1>
  3. </ion-header-bar>
  4.          
  5. <ion-content>
  6.   
  7.   <div class="list">
  8.     
  9.     <ion-checkbox ng-repeat="item in devList"
  10.                   ng-model="item.checked" 
  11.                   ng-checked="item.checked">
  12.       {{ item.text }}
  13.     </ion-checkbox>
  14.     
  15.     <div class="item">
  16.       <div ng-bind="devList | json"></div> 
  17.     </div>
  18.     
  19.     <div class="item item-divider"> 
  20.       Notifications
  21.     </div>
  22.     
  23.     <ion-checkbox ng-model="pushNotification.checked"
  24.                   ng-change="pushNotificationChange()">
  25.       Push Notifications
  26.     </ion-checkbox>
  27.     
  28.     <div class="item">
  29.       <div ng-bind="pushNotification | json"></div> 
  30.     </div>
  31.     
  32.     <ion-checkbox ng-model="emailNotification"
  33.                   ng-true-value="'Subscribed'"
  34.                   ng-false-value="'Unubscribed'">
  35.       Newsletter
  36.     </ion-checkbox>
  37.     <div class="item">
  38.       <div ng-bind="emailNotification | json"></div> 
  39.     </div>
  40.     
  41.   </div>
  42.   
  43. </ion-content>

JavaScript 代码

  1. angular.module('starter', ['ionic'])
  2.  
  3. .run(function($ionicPlatform) {
  4. $ionicPlatform.ready(function() {
  5.   // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  6.   // for form inputs)
  7.   if(window.cordova && window.cordova.plugins.Keyboard) {
  8.     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  9.   }
  10.   if(window.StatusBar) {
  11.     StatusBar.styleDefault();
  12.   }
  13. });
  14. })
  15.  
  16. .controller( 'actionsheetCtl',['$scope',function($scope){
  17.  
  18.   $scope.devList = [
  19.       { text: "HTML5", checked: true },
  20.       { text: "CSS3", checked: false },
  21.       { text: "JavaScript", checked: false }
  22.     ];
  23.  
  24.     $scope.pushNotificationChange = function() {
  25.       console.log('Push Notification Change', $scope.pushNotification.checked);
  26.     };
  27.  
  28.     $scope.pushNotification = { checked: true };
  29.     $scope.emailNotification = 'Subscribed';
  30.  
  31. }])

css 代码：

  1. body {
  2.   cursor: url('http://www.shouce.ren/try/demo_source/finger.png'), auto;
  3. }