ionic js 复选框 与普通的 HTML 复选框到底有没区别


Posted in Javascript onJune 06, 2016

 ionic 复选框

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 复选框 与普通的 HTML 复选框到底有没区别

完整源码:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-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"></script>
<script type="text/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';
}])
</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-controller="actionsheetCtl" >
<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">
<pre ng-bind="devList | json"></pre> 
</div>
<div class="item item-divider"> 
Notifications
</div>
<ion-checkbox ng-model="pushNotification.checked"
ng-change="pushNotificationChange()">
Push Notifications
</ion-checkbox>
<div class="item">
<pre ng-bind="pushNotification | json"></pre> 
</div>
<ion-checkbox ng-model="emailNotification"
ng-true-value="'Subscribed'"
ng-false-value="'Unubscribed'">
Newsletter
</ion-checkbox>
<div class="item">
<pre ng-bind="emailNotification | json"></pre> 
</div>
</div>
</ion-content>
</body>
</html>

以上所述是小编给大家介绍的ionic js 复选框 与普通的 HTML 复选框到底有没区别的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
jquery 触发a链接点击事件解决方案
May 02 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
深入分析javascript中console命令
Aug 14 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
vue实现树状表格效果
Dec 29 Vue.js
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 #Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 #Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 #Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 #Javascript
jquery树形菜单效果的简单实例
Jun 06 #Javascript
逻辑表达式中与或非的用法详解
Jun 06 #Javascript
node.js 中国天气预报 简单实现
Jun 06 #Javascript
You might like
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
详解Vue中watch的高级用法
2018/05/02 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python组合无重复三位数的实例
2018/11/13 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python字典按照value排序方法
2020/12/28 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
成人教育自我鉴定
2013/11/01 职场文书
小学家长评语大全
2014/04/16 职场文书
2014年党支部承诺书
2014/05/30 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python