The Ionic check box (checkbox) is not the same as a normal HTML check box, and the following example shows an app that ionic check box Ion-checkbox.
<ng-model= "isChecked"> check box label </ion-checkbox >
instance, the checked value is modified according to whether the check box is selected, True is checked, and false is unchecked.
HTML Code
<Ion-header-barclass= "Bar-positive"> <H1class= "title">check box</H1></Ion-header-bar> <ion-content> <Divclass= "List"> <Ion-checkboxng-repeat= "Item in Devlist"Ng-model= "item.checked"ng-checked= "item.checked">{{Item.text}}</Ion-checkbox> <Divclass= "Item"> <DivNg-bind= "Devlist | json"></Div> </Div> <Divclass= "Item Item-divider">Notifications</Div> <Ion-checkboxNg-model= "pushnotification.checked"Ng-change= "Pushnotificationchange ()">Push Notifications</Ion-checkbox> <Divclass= "Item"> <DivNg-bind= "Pushnotification | json"></Div> </Div> <Ion-checkboxNg-model= "Emailnotification"Ng-true-value= "' Subscribed '"Ng-false-value= "' unubscribed '">Newsletter</Ion-checkbox> <Divclass= "Item"> <DivNg-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
{ cursor: url (' http://www.runoob.com/try/demo_source/finger.png '), Auto;}
?
?
Ionic js four: check box