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显示选择目录对话框的代码
Nov 10 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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
一个多文件上传的例子(原创)
2006/10/09 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
prototype 的说明 js类
2006/09/07 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
ionic3 懒加载
2017/08/16 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
分享一个python的aes加密代码
2020/12/22 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
共产党员承诺书
2014/03/25 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
后勤工作个人总结
2015/02/28 职场文书
经理聘任证明
2015/03/02 职场文书
创业计划书详解
2019/07/19 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang