イオンチェックボックス
イオンチェックボックス(チェックボックス)は、通常のHTMLチェックボックスと違いはありません。次の例は、イオンチェックボックスイオンチェックボックスの適用を示しています。
<ion-checkbox ng-model = "ischecked">チェックボックスタグ</ion-checkbox>
例
例では、チェックボックスが選択されているかどうかに基づいて、チェック値が変更され、trueが選択され、falseがチェックされていません。
HTMLコード
<ion-header-bar> <h1>チェックボックス</h1> </ion-header-bar> <ion-content> <ion-checkbox ng-repeat = "item in devlist" ng-model = "アイテム}} </ion-checkbox> <div> <div ng-bind = "devlist | json"> </div> </div> <div>通知</div> <ion-checkbox ng-model = "pushnotification.チェック" ng-change = "push-changefificationechange() | json "> </div> </<ion-checkbox ng-model =" ng-true-value = "'' ng-false-value =" 'unubscribed'> Newsletter </ion-checkbox> <div> <div> </ </div> </div> </ion-content>
JavaScriptコード
Angular.Module( 'Starter'、['Ionic']) {cordova.plugins.keyboard.hidekeyboardaccessorybar(true);} if(window.statusbar){statusbar.styledefault();}};}) }、{text: "css3"、checked:false}、{text: "javascript"、checked:false}]; $ scope.pushnotificationchange = function(){console.log( 'プッシュ通知変更'、$ scope.pushnotification.checked);} '購読';}])CSSコード:
body {cursor:url( 'http://www.runoob.com/try/demo_source/finger.png')、auto;}効果は次のとおりです。
完全なソースコード:
<html> <head> <Meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1、maximing-scale = 1、user-scalable = no、width = device-width"> <title> </title> <link 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"> type = "text/javascript"> angular.module( 'starter'、['ionic']))。 {cordova.plugins.keyboard.hidekeyboardaccessorybar(true);} if(window.statusbar){statusbar.styledefault();}};}) }、{text: "css3"、checked:false}、{text: "javascript"、checked:false}]; $ scope.pushnotificationchange = function(){console.log( 'プッシュ通知変更'、$ scope.pushnotification.checked);} 'subscribed';}])</script> <style type = "text/css"> body {cursor:url( 'http://www.runoob.com/try/demo_source/finger.png')、auto;} </style> </head> <body ng-app = "ng-contl = > <Ion-Header-Bar> <h1>チェックボックス</h1> </ion-header-bar> <ion-content> <ion-content> <ion-checkbox ng-repeat = "item in devlist" ng-model = "item.checked" ng-checked = "item.checked"> {{item.text} <pre ng-bind = "devlist | json"> </pre> </div> <div>通知</div> <ion-checkbox ng-model = "pushnotification.checked" ng-change = "pushnotificationチャンゲ()" </div> <ion-checkbox ng-model = "emailnotification" ng-true-value = "'subscribed'" ng-false-value = "'unubscribed'"> newsletter </ion-checkbox> <div> <pre ng-bind = "emailnotification | json"> </pre o </div> </div> </ion-content> </body> </html>上記は、編集者がIonic JSチェックボックスと通常のHTMLチェックボックスに違いがあるかどうかについて紹介する関連コンテンツです。私はそれが誰にでも役立つことを願っています!