cocher ionic
La boîte à cocher ionique (coche) n'est pas différente de la boîte à cocher HTML normale. L'exemple suivant démontre l'application de la boîte à cocher ionique ion-cckerbox.
<ion-checkbox ng-model = "isChecked"> Checkbox Tag </ion-cacheckbox>
Exemple
Dans le cas, la valeur cochée sera modifiée selon que la case à cocher est sélectionnée ou non, la vraie est sélectionnée et que FAUX n'est pas cochée.
Code html
<ion-header-bar> <h1> Checkbox </h1> </ ion-header-bar> <ion-content> <v> <ion-checkbox ng-repeat = "item dans levlist" ng-model = "item.checked" ng-checked = "item.checked" ng-cecked = "item.checked"> {{élément.Text " }} </ ion-cochoxbox> <div> <div ng-bind = "devlist | json"> </div> </div> <v> notifications </div> <ion-checkbox ng-model = "pushNotification.checked" ng-changes = "pushNotificationChange ()"> pushotification </ion-checkbox> JSON "> </ div> </ div> <ion-checkbox ng-model =" EmailNotification "ng-true-Value =" '' 'newsletter' ng-false> <div> <div ng-binD = "e-mail | json"> </v>Code javascript
angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// masquer la barre accessoire par défaut (supprimer ceci pour afficher la barre accessoire au-dessus du clavier // pour les entrées de formulaire) 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" Texte: "CSS3", vérifié: false}, {text: "javascript", vérifié: false}]; $ scope.pushNotificationChange = function () {console.log ('push notification change', $ scope.pushnotification.checked);}; $ scope.pushnotification = {vérifié: true}; $ scope.emo «Abonné»;}])Code CSS:
Body {Cursor: URL ('http://www.runoob.com/try/demo_source/finger.png'), auto;}L'effet est le suivant:
Code source complet:
<html> <éad- head> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width"> <ititle> </ title> <lien href = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"> </ script> type = "text / javascript"> angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// masquer la barre accessoire par défaut (supprimer ceci pour afficher la barre accessoire au-dessus du clavier // pour les entrées de formulaire) if (fenêtre. {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('ActionSheetCTl', ['$ Scope', function ($ Scope) {$ Scope.DevList = [{Text: "HTML5" Texte: "CSS3", vérifié: false}, {text: "javascript", vérifié: false}]; $ scope.pushNotificationChange = function () {console.log ('push notification change', $ scope.pushnotification.checked);}; $ scope.pushnotification = {vérifié: true}; $ scope.emo 'Abribus';}]) </cript> <style type = "text / css"> body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;} </ style> </ head> <body ng-app = "starter" ng-ccontroller = "ActionSh" > <ion-header-bar> <h1> Checkbox </h1> </ ion-header-bar> <ion-content> <v> <ion-checkbox ng-repeat = "item in Devlist" ng-model = "item.checked" ng-checked = "item.checked"> {{élément}} </ ion-checkbox> ng-bind = "Devlist | json"> </ pre> </ div> <div> notifications </div> <ion-checkbox ng-model = "pushNotification.checked" ng-change = "pushNotificationChange ()"> push notifications </ ion-checkbox> <v> <pre ng-bind = "pushnotification | json"> </ pre> </ div> ng-model = "emailNotification" ng-true-Value = "'' abonné '" ng-false-valey = "' inubscrit '"> newsletter </ ion-checkbox> <v> <pre ng-bind = "e-mailNotification | JSON"> </pan> </v> </vindeCe qui précède est le contenu pertinent que l'éditeur vous introduit pour savoir s'il existe une différence entre la case Ionic JS et la case HTML ordinaire. J'espère que ce sera utile à tous!