خانة الاختيار الأيونية
لا يختلف مربع الاختيار الأيوني (مربع الاختيار) عن خانة الاختيار HTML العادية. يوضح المثال التالي تطبيق مربع الاختيار الأيوني.
<ion-ceckbox ng-model = "iSchecked"> علامة الاختيار </ion-checkbox>
مثال
في المثيل ، سيتم تعديل القيمة التي تم فحصها بناءً على ما إذا كان مربع الاختيار محدد أم لا ، يتم تحديد TRUE ولا يتم تحديد خطأ.
رمز HTML
<ION-HEADER-BAR> <H1> مربع الاختيار </h1> </ion-header-bar> <-ion-content> <viv> <ion-checkbox ng-repeat = "item in devlist" ng-model = "item.checked" ng checked = "item.checked" ng-checked = "item. }} </ion-checkbox> <viv> <div ng-bind = "devlist | json"> </viv> </viv> <viv> الإخطارات </div> <ion-checkbox ng-model = "pushnotification.checked" ng change = "pushnotificationChange ()> push notivisations </ion-expint = JSON "> </viv> </viv> <ion-checkbox ng-model =" emailNotification "ng-true-value =" '' مشترك "" ng-false-value = "'unubscriped'"> newsletter </ion-checkbox> <div>
رمز JavaScript
Angular.Module ('starter' ، ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// إخفاء شريط الملحقات بشكل افتراضي (أزل هذا لإظهار شريط الملحقات فوق لوحة المفاتيح // لمدخلات الشكل) إذا (window.cordova {cordova.plugins.keyboard.hidekeyboardAccessorybar (true) ؛} if (window.statusbar) {statusbar.styledefault () ؛}}) ؛}) النص: "CSS3" ، تم التحقق منه: false} ، {text: "javaScript" ، تم التحقق منه: false}] 'مشترك' ؛}])رمز CSS:
body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png') ، auto ؛}التأثير على النحو التالي:
رمز المصدر الكامل:
<html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "inials-scale = 1 ، maximum-scale = 1 ، ster-scalable = no ، width = device-width"> </ithit HREF = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel = "STYLESHET"> <script src = "http://cdn.bootcss.com/ionic/1.1.1/js.bundle.min.min type = "text/javaScript"> Angular.module ('starter' ، ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready {cordova.plugins.keyboard.hidekeyboardAccessorybar (true) ؛} if (window.statusbar) {statusbar.styledefault () ؛}}) ؛}) النص: "CSS3" ، تم التحقق منه: false} ، {text: "javaScript" ، تم التحقق منه: false}] 'مشترك' ؛}]) </script> <style type = "text/css"> body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png') ، auto ؛} </style> </head> > <ion-header-bar> <h1> مربع الاختيار </h1> </ion-header-bar> <ion-content> <viv> <ion-checkbox ng-repeat = "item in devlist" ng-model = "item.checked" ng-checked = "item.checked" ng-bind = "devlist | json"> </pre> </viv> <viv> الإخطارات </div> <ion-checkbox ng-model = "pushnotification.checked" ng-change = "pushNotificationChange () ng-model = "emailNotification" ng-true-value = "'' 'مشترك" "ng-false-value ="' unubscribed '"> newsletter </ion-checkbox> <div> <pred ng-bind =" eillenotification | jsonما سبق هو المحتوى ذي الصلة الذي يقدمه لك المحرر حول ما إذا كان هناك أي فرق بين خانة الاختيار Ionic JS وخانة الاختيار HTML العادية. آمل أن يكون ذلك مفيدًا للجميع!