kotak centang ionik
Kotak centang ionik (kotak centang) tidak berbeda dengan kotak centang HTML normal. Contoh berikut menunjukkan penerapan kotak centang ion ion-checkbox ion.
<ion-checkbox ng-model = "isChecked"> Tag kotak centang </ion-checkbox>
Contoh
Dalam contoh, nilai yang diperiksa akan dimodifikasi berdasarkan apakah kotak centang dipilih atau tidak, benar dipilih dan false tidak dicentang.
Kode HTML
<ion-header-bar> <h1> kotak centang </h1> </ion-header-bar> <ion-content> <div> <ion-checkbox ng-repeat = "item di devlist" ng-model = "item.Checked" ng-checked = "item.Check.Checked" ng-checked = "item.check" ng-check = "item.Check. }} </ion-checkbox> <div> <div ng-bind = "devlist | json"> </div> </div> <viv> notifikasi </div> <ion-checkbox ng-model = "pushnotification. JSON "> </Div> </div> <ion-checkbox ng-model =" emailNotification "ng-true-value =" 'berlangganan' "ng-false-value =" 'unubscribed' "> </ion-checkbox> <v> <v div ng-bind =" emailNotifikasi |
Kode JavaScript
angular.module ('starter', ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// Sembunyikan bilah aksesori secara default (hapus ini untuk menampilkan bilah aksesori di atas keyboard // untuk input form) if (window.cordova & window.cordova.cord.cordov.cordov.cordov.cordov. Windowin. {cordova.plugins.keyboard.hideKeyboardAccessoryBar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). controller ('actionheetctl', ['$ scope', function ($ scope) {$ scope.dev. }, {teks: "css3", checked: false}, {text: "javaScript", checked: false}]; $ scope.pushnotificationchange = function () {console.log ('Push notification', $ scope.pushnotification.checked);}; $ scope.pushny. 'Berlangganan';}])Kode CSS:
Body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}Efeknya adalah sebagai berikut:
Kode Sumber Lengkap:
<html> <head> <meta charset = "utf-8"> <meta name = "viewport" konten = "skala awal = 1, skala maksimum = 1, skala user = no, lebar = device-width"> <it title> <title> <link href = "http://cdn.bootc.cscom.cs.c.s.1.1.1..1..1.1..1.1. rel = "stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"> </script> <script type = "text/javascript"> funche ('starter', ['ionic'). {$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 = {check: true}; $ scope.emailnotification = 'Sumber';}] </script> {} {{} {} {} {} {{} {{} {{{} {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{cumba ". url ('http://www.runoob.com/try/demo_source/finger.png'), auto;} </tyle> </head> <body ng-app = "starter" ng-controller = "actionheetctl" > <ion-header-bar> <h1> Kotak centang </h1> </ion-header-bar> <ion-content> <div> <ion-checkbox ng-repeat = "item di devlist" ng-model = "item.checked" ng-check = "item.check.checked"> {{{{{{{{{{{{{{{{{{{{{{checke "> ng-bind = "devlist | json"> </pe> </div> <div> notifikasi </div> <ion-checkbox ng-model = "pushnotification. ng-model="emailNotification"ng-true-value="'Subscribed'"ng-false-value="'Unubscribed'">Newsletter</ion-checkbox><div><pre ng-bind="emailNotification | json"></pre> </div></div></ion-content></body></html>Di atas adalah konten yang relevan yang diperkenalkan oleh editor kepada Anda tentang apakah ada perbedaan antara kotak centang Ionic JS dan kotak centang HTML biasa. Saya harap ini akan membantu semua orang!