ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用。

<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>

实例中,会根据复选框是否选中,修改 checked 值,true 为选中, false 为未选中。
HTML 代码

<ion-header-bar class="bar-positive">
<h1 class="title">复选框</h1>
</ion-header-bar> <ion-content> <div class="list"> <ion-checkbox ng-repeat="item in devList"
ng-model="item.checked"
ng-checked="item.checked">
{{ item.text }}
</ion-checkbox> <div class="item">
<div ng-bind="devList | json"></div>
</div> <div class="item item-divider">
Notifications
</div> <ion-checkbox ng-model="pushNotification.checked"
ng-change="pushNotificationChange()">
Push Notifications
</ion-checkbox> <div class="item">
<div ng-bind="pushNotification | json"></div>
</div> <ion-checkbox ng-model="emailNotification"
ng-true-value="'Subscribed'"
ng-false-value="'Unubscribed'">
Newsletter
</ion-checkbox>
<div class="item">
<div ng-bind="emailNotification | json"></div>
</div> </div> </ion-content>

JavaScript 代码

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
$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 = { checked: true };
$scope.emailNotification = 'Subscribed'; }])

css 代码

body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

Ionic Js四:复选框的更多相关文章

  1. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  3. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  4. js操作复选框 复选框

    //复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...

  5. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. ionic-CSS:ionic checkbox(复选框)

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  7. js操作复选框

    js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...

  8. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  9. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  10. 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询

    这是界面代码: ​ function shua(){             var id_array=new Array();         $('input[id="checkAll& ...

随机推荐

  1. R6—单变量正态性检验

    方法不唯一 单变量正态检验主要的话包括以下这些 shapiro.test();#Shapiro-Wilk检验 library("nortest"); lillie.test() # ...

  2. 引发类型为“System.OutOfMemoryException”的异常

    在运维工作中,经常能接到客户的反馈这个:引发类型为“System.OutOfMemoryException”的异常.客户反馈物理内存都还有富余,怎么报内存不足的错误呢! 什么时候会引发System.O ...

  3. python 爬虫简单的demo

    ''' @author :Eric-chen @contact:809512722@qq.com @time :2018/1/3 17:55 @desc :通过爬取http://movie.douba ...

  4. css给表格每一列设置不同的样式

    第一列#id table tr td:first-child{ overflow: visible; }第二列table tr td:first-child+td{color:#666;}第三列tab ...

  5. linux arm的存储分布那些事之一【转】

    转自:http://blog.csdn.net/xiaojsj111/article/details/11724081 linux arm的存储分布那些事之一 linux arm 内存分布总览 上图是 ...

  6. aarch64_n2

    nodejs-is-dotfile-1.0.2-2.fc26.noarch.rpm 2017-02-12 00:27 9.5K fedora Mirroring Project nodejs-is-e ...

  7. 华硕笔记本U盘重装系统

    ESC启动把Secure Boot改为Disabled,Launch CSM改为Enabled,然后重新选择不带UEFI字样的U盘启动项.然后就可以找到U盘进入PE

  8. Codeforces 859E Desk Disorder 并查集找环,乘法原理

    题目链接:http://codeforces.com/contest/859/problem/E 题意:有N个人.2N个座位.现在告诉你这N个人它们现在的座位.以及它们想去的座位.每个人可以去它们想去 ...

  9. Django-模板语言和过滤器

    Django模板语言 首先模板只是一个文本文件,它可以生成任何基于文本的格式(HTML.XML.CSS等),模板中包含变量,在模板被渲染的时候替换为最终的值,以及控制模板逻辑的标签. 变量使用{{ 变 ...

  10. Python中使用LMDB

    在python中使用lmdb linux中,可以使用指令pip install lmdb安装lmdb包. 生成一个空的lmdb数据库文件 # -*- coding: utf-8 -*- import ...