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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
js替代copy(示例代码)
Nov 27 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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的性能
2013/10/30 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
JS实现元素上下左右移动效果
2017/10/18 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python实现维吉尼亚算法
2019/03/20 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python列表的逆序遍历实现
2020/04/20 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
缅怀先烈演讲稿
2014/09/03 职场文书
西柏坡观后感
2015/06/08 职场文书
辞职申请书范本
2019/05/20 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js