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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
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中的unset究竟会不会释放内存
2013/07/18 PHP
YII路径的用法总结
2014/07/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php实现留言板功能
2017/03/05 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python生成数字图片代码分享
2017/10/31 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python实现代码审查自动回复消息
2021/02/01 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
小学清明节活动方案
2014/03/08 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
物业消防安全责任书
2014/07/23 职场文书
医德考评自我评价
2014/09/14 职场文书
房屋租房协议书范本
2014/12/04 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS