AngularJS+bootstrap-switch 实现开关控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/bootstrap-switch.min.css">
<link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/style.css">
</head>
<body ng-app="myapp" >
<!-- demo -->
<div ng-controller="myctra">
<button type="button" ng-click = "test()" >biggg</button>
<!-- 控件 -->
<!-- <my-input model="x" fun = "sub"></my-input> -->
<input type="checkbox" name="switch" checked/> </div> <script type="text/javascript" src="./libs/angular.min.js"></script>
<script type="text/javascript" src="./libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./libs/bootstrap/js/bootstrap-switch.min.js"</script>
<script type="text/javascript" src="./libs/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"> var appModule = angular.module('myapp', []); appModule.controller('myctra',['$scope',function($scope){
$scope.persons = ['wo','你','他'];
$scope.x = true;
$scope.test = function(){
console.log($scope.x);
}; $scope.sub = function(state){
console.log(state);
}; var c = $("[name='switch']");
c.bootstrapSwitch('state', $scope.x); // true || false
c.on('switchChange.bootstrapSwitch', function(event, state) {
$scope.sub(state); // true | false
});
}]); //控件
appModule.directive('myInput',function(){
return{
restrict : "E",
scope : {
model :"=",
fun :"="
},
template :'<div class="switch"></div>',
replace : true,
link : function(scope,element,attr){
var $input = $('<input type="checkbox" name="switch" checked>');
$(element[0]).append($input);
var c = $(element[0]).children();
c.bootstrapSwitch('state', scope.model); // true || false
c.on('switchChange.bootstrapSwitch', function(event, state) {
scope.fun(state);
});
}
}
});
</script>
</body>
</html>
AngularJS+bootstrap-switch 实现开关控件的更多相关文章
- 【经验】Angularjs 中使用 layDate 日期控件
layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...
- UISwitch 开关控件
UISwitch iOS中的开关控件,只有两种状态,打开或关闭. aSwitch.tintColor = [UIColor redColor]; //关闭状态下的渲染颜色 aSwitch.onTint ...
- weui-switch开关控件,表单提交后如何取值
最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态, ...
- bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
- [Xcode 实际操作]四、常用控件-(6)UISwitch开关控件的使用
目录:[Swift]Xcode实际操作 本文将演示开关控件的基本用法. 开关控件有两个互斥的选项,它是用来打开或关闭选项的控件. 在项目导航区,打开视图控制器的代码文件[ViewController. ...
- android自己定义开关控件
近日在android项目要使用开关控件.可是android中自带的开关控件不太惬意,所以就打算通过自己定义View写一个开关控件 ios的开关控件当然就是我要仿照的目标. 先上图: waterma ...
- 一个Bootstrap风格的分页控件
http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...
- UISwitch开关控件属性介绍以及获取开关状态并做出响应
(1)UISwitch的大小也是固定的,不随我们frame设置的大小改变:也是裁剪成圆角的,设置背景就露马脚发现背景是矩形. (2)UISwitch的背景图片设置无效,即我们只能设置颜色,不能用图片当 ...
- Bootstrap中datetimepicker日期控件1899年问题解决
Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...
- Bootstrap的表单控件
支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...
随机推荐
- AIDL安卓接口定义语言
Android Interface Definition Language简称AIDL翻译为 :安卓 接口 定义 语言 AIDL:进程间通信.Android ...
- LeetCode题解之Find All Duplicates in an Array
1.题目描述 2.问题分析 将数组中的元素 A[i] 放到 A[ A[i] - 1] 的位置.然后遍历一边数组,如果不满足 A[i] == i+1,则将A[i]添加到 结果中. 3.代码 vector ...
- 服务器重启可能会导致SQL Server中部分数据库变为single user mode
今天检查公司生产服务器的SQL Server数据库,惊讶的发现有三个生产数据库变为了single user mode.奇怪的是没有任何人和程序执行过SQL语句将这三个数据库设置为single user ...
- 了解注解及java提供的几个基本注解
先通过@SuppreessWarnings的应用让大家直观地了解注解: 通过System.runFinalizersOnExit(true);的编译器警告引出 @SuppressW ...
- 2017-2018-2 20165318 实验四《Android程序设计》实验报告
2017-2018-2 20165318 实验四<Android程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:孙晓暄 ...
- C#创建无窗体的应用程序
示例程序 这是初学C#时困惑了很久才解决的问题,突然想起来拿出来和大家分享. 当初我是这样做的: 1. 在窗体初始化时(构造函数里面),添加一句This.Visible = false; 2 ...
- django表格form无法保存评论排查步骤
初学django项目,在网上找了个blog教程,还是很不错的,这里感谢一下博主https://www.zmrenwu.com/post/2/ 这个项目适合django初学者,是一个完整的blog项目 ...
- J-Link调试查看变量值总是显示<not in scope> 和<cannot evaluate>问题
原文:https://blog.csdn.net/gmpy_tiger/article/details/50395719 MDK/Keil 中,J-Link调试查看变量值总是显示<not in ...
- python面试一:python2与python3的区别一
1.默认编码方式不同:py3用的是utf-8,变量名更为广泛.2.去除<>改用!=3加入as 和with关键字4./除法默认数据类型不同 py2 5/3=1 py3 5//3=15.去掉了 ...
- Python2.7-dbm、gdbm、dbhash、bsddb、dumbdb
dbm.gdbm.dbhash.bsddb.dumbdb模块,都是操作数据库文件的模块,打开后都会返回对应数据库类型对象,类似字典,有许多操作和字典操作相同,键和值都是以字符串形式保存.dbm 是简单 ...