ช่องทำเครื่องหมายอิออน
ช่องทำเครื่องหมาย Ionic (ช่องทำเครื่องหมาย) ไม่แตกต่างจากช่องทำเครื่องหมาย HTML ปกติ ตัวอย่างต่อไปนี้แสดงให้เห็นถึงแอปพลิเคชันของช่องทำเครื่องหมายไอออนิกไอออน
<ion-checkbox ng-model = "ischecked"> แท็กกล่องทำเครื่องหมาย </ion-checkbox>
ตัวอย่าง
ในอินสแตนซ์ค่าที่ตรวจสอบจะได้รับการแก้ไขโดยขึ้นอยู่กับว่าช่องทำเครื่องหมายถูกเลือกหรือไม่จริงจะถูกเลือกจริงและไม่ถูกตรวจสอบเท็จ
รหัส HTML
<ion-header-bar> <h1> ช่องทำเครื่องหมาย </h1> </ion-header-bar> <ion-content> <div> <ion-checkbox ng-repeat = "รายการใน devlist" ng-model = "item.checked" ng-checked = "รายการ }} </ion-checkbox> <div> <div ng-bind = "devlist | json"> </div> </div> <div> การแจ้งเตือน </div> <ion-checkbox ng-model = "pushnotification JSON "> </div> </div> <ion-checkbox ng-model =" emailnotification "ng-true-value =" 'สมัครสมาชิก' "ng-false-value =" 'Unubscribed' "> จดหมายข่าว </div-curt
รหัส JavaScript
Angular.module ('Starter', ['Ionic']). Run (ฟังก์ชั่น ($ ionicplatform) {$ ionicplatform.ready (function () {// ซ่อนแถบอุปกรณ์เสริมโดยค่าเริ่มต้น (ลบสิ่งนี้เพื่อแสดงแถบอุปกรณ์เสริมด้านบนคีย์บอร์ด // {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} ถ้า (window.statusbar) {statusbar.styledefault ();}});}) คอนโทรลเลอร์ ('actionsheetctl', ['$ scope', ฟังก์ชั่น ($ scope) }, {text: "css3", ตรวจสอบ: false}, {text: "javascript", ตรวจสอบ: false}]; $ scope.pushnotificationchange = ฟังก์ชั่น () {console.log ( 'สมัครสมาชิก';}])รหัส CSS:
ร่างกาย {เคอร์เซอร์: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}เอฟเฟกต์มีดังนี้:
ซอร์สโค้ดที่สมบูรณ์:
<html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "เริ่มต้น = 1, ขนาดสูงสุด = 1 href = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3 type = "text/javascript"> angular.module ('starter', ['ionic']). run (ฟังก์ชั่น ($ ionicplatform) {$ ionicplatform.ready (ฟังก์ชั่น () {// ซ่อนแถบอุปกรณ์เสริมโดยค่าเริ่มต้น {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} ถ้า (window.statusbar) {statusbar.styledefault ();}});}) คอนโทรลเลอร์ ('actionsheetctl', ['$ scope', ฟังก์ชั่น ($ scope) }, {text: "css3", ตรวจสอบ: false}, {text: "javascript", ตรวจสอบ: false}]; $ scope.pushnotificationchange = ฟังก์ชั่น () {console.log ( 'สมัครสมาชิก';}]) </script> <style type = "text/css"> body {เคอร์เซอร์: url ('http://www.runoob.com/try/demo_source/finger.png'), auto; > <ion-header-bar> <h1> ช่องทำเครื่องหมาย </h1> </ion-header-bar> <ion-content> <div> <ion-checkbox ng-repeat = "รายการใน devlist" ng-model = "รายการ em/{{ast. ng-bind = "devlist | json"> </pre> </div> <div> การแจ้งเตือน </div> <ion-checkbox ng-model = "pushnotification ตรวจสอบ" ng-change = "pushnotificationchange () </push ng-bind =" pushnotification ng-model = "emailnotification" ng-true-value = "'สมัครสมาชิก'" ng-false-value = "'Unubscribed'"> จดหมายข่าว </ion-checkbox> <div> <pre ng-bind = "emailnotification | json"> </pre> </divข้างต้นเป็นเนื้อหาที่เกี่ยวข้องที่ตัวแก้ไขแนะนำให้คุณทราบว่ามีความแตกต่างระหว่างช่องทำเครื่องหมาย Ionic JS และช่องทำเครื่องหมาย HTML สามัญหรือไม่ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!