이온 성 확인란
Ionic Checkbox (Checkbox)는 일반 HTML 확인란과 다르지 않습니다. 다음 예제는 이온 체크 박스 이온-체크 박스의 적용을 보여줍니다.
<Ion-Checkbox ng-model = "ischecked"> checkbox tag </iion-checkbox>
예
예에서는 확인란이 선택되었는지 여부에 따라 확인 된 값이 수정되며, true가 선택되고 False가 확인되지 않았습니다.
HTML 코드
<ION-HEADER-BAR> <H1> CheckBox </h1> </h1> </ison-header-bar> <iOn-content> <div> <iOn-checkbox ng-repeat = "item in devlist"ng-model = "item.checked"ng-Checked = "item.checked"ng checked = "item }}}} </ion-checkbox> <div> <div ng-bind = "devlist | json"> </div> </div> <div> 알림 </div> <iOn-checkbox ng-model = "pushnotification.checked"ng-change = "PushnotificationChange ()"> 푸시 알림 </ison-checkbox> JSON "> </div> </div> <iOn-Checkbox ng-model ="emailnotification "ng-true-value =" 'bubscribed' "ng-false-value =" 'unubscribed' "> 뉴스 레터 </iion-checkbox> <div> <div ng-bind ="emailnotification |
자바 스크립트 코드
Angular.Module ( 'starter', [ 'Ionic']). run (function ($ itionicplatform) {$ irionicplatform.ready (function () {// 액세서리 막대를 기본적으로 숨기십시오 (window.cordova && window.corbob.keyboard). {cordova.plugins.keyboard.hidekeyboardAccessoryBar (true);} if (wind }, {text : "css3", checked : false}, {text : "javaScript", checked : false}]; $ scope.pushNotificationChange = function () {console.log ( '푸시 알림 변경', $ scope.pushnotification.checked);}; $ scope.ecnotification =}; '구독';}]))CSS 코드 :
Body {cursor : url ( 'http://www.runoob.com/try/demo_source/finger.png'), auto;}효과는 다음과 같습니다.
완전한 출처 코드 :
<html> <head> <meta charset = "utf-8"> <meta name = "viewport"컨텐츠 = "초기 스케일 = 1, maximum-scale = 1, user-scalable = no, width = device-width"> </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.3.3.3.3.3.3s/ionic.bundle.min.js"> type = "text/javaScript"> angular.Module ( 'starter', [ 'iOnic']). run (function ($ irionicplatform) {$ irionicplatform.ready (function () {// 액세서리 바를 기본적으로 숨기기 위해 (window.cordova.cordova. {cordova.plugins.keyboard.hidekeyboardAccessoryBar (true);} if (wind }, {text : "css3", checked : false}, {text : "javaScript", checked : false}]; $ scope.pushNotificationChange = function () {console.log ( '푸시 알림 변경', $ scope.pushnotification.checked);}; $ scope.ecnotification =}; '구독';}]) </script> <style type = "text/css"> body {cursor : url ( 'http://www.runoob.com/try/demo_source/finger.png'), Auto;} </style> </head> <body ng-app = "Starter"ng-ceettroller ""acture " > <Ion-Header-Bar> <H1> CheckBox </h1> </h1> </ison-header-bar> <iOn-content> <div> <iOn-checkbox ng-repeat = "item in devlist"ng-model = "item.checked"ng-Checked = "item.checked"> {item.text} </eheckbox> <p. ng-bind = "devlist | json"> </pre> </div> </div> <div> 알림 </div> <iion-Checkbox ng-model = "pushnotification.checked"ng-change = "pushnotificationchange ()"> 푸시 알림 </yon-checkbox> <div> <pre ng-bind = "pushnotification | json"> pre pre pre pre pre prus. ng-model = "emailnotification"ng-true-value = " ''구독 '"NG-False-Value = "'unubScribed '"> Newsletter </iOn-checkbox> <div> <pre ng-bind = "emailnotification | json"> </pre> </div> </html> </html>위의 것은 편집자가 Ionic JS 체크 박스와 일반 HTML 확인란 사이에 차이가 있는지 여부에 대해 소개하는 관련 컨텐츠입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!