<!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 实现开关控件的更多相关文章

  1. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  2. UISwitch 开关控件

    UISwitch iOS中的开关控件,只有两种状态,打开或关闭. aSwitch.tintColor = [UIColor redColor]; //关闭状态下的渲染颜色 aSwitch.onTint ...

  3. weui-switch开关控件，表单提交后如何取值

    最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态, ...

  4. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  5. [Xcode 实际操作]四、常用控件-(6)UISwitch开关控件的使用

    目录:[Swift]Xcode实际操作 本文将演示开关控件的基本用法. 开关控件有两个互斥的选项,它是用来打开或关闭选项的控件. 在项目导航区,打开视图控制器的代码文件[ViewController. ...

  6. android自己定义开关控件

    近日在android项目要使用开关控件.可是android中自带的开关控件不太惬意,所以就打算通过自己定义View写一个开关控件 ios的开关控件当然就是我要仿照的目标. 先上图:   waterma ...

  7. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  8. UISwitch开关控件属性介绍以及获取开关状态并做出响应

    (1)UISwitch的大小也是固定的,不随我们frame设置的大小改变:也是裁剪成圆角的,设置背景就露马脚发现背景是矩形. (2)UISwitch的背景图片设置无效,即我们只能设置颜色,不能用图片当 ...

  9. Bootstrap中datetimepicker日期控件1899年问题解决

    Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...

  10. Bootstrap的表单控件

    支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...

随机推荐

  1. Android Studio 一个完整的APP实例（附源码和数据库）

    前言: 这是我独立做的第一个APP,是一个记账本APP. This is the first APP, I've ever done on my own. It's a accountbook APP ...

  2. JSTL核心标签库——<c:set>标签、<c:out>标签

    <c:set>标签 index.jsp <%@ page import="java.util.Map" %> <%@ page import=&quo ...

  3. sql server 存储过程的学习

    存储过程学习笔记 存储过程就是一条或者多条sql语句的集合,为了实现特定任务,而将一些需要多次调用的固定操作语句编写成程序段,这些程序段存储在服务器上,有数据库服务器通过程序来调用.T_SQL:存储过 ...

  4. C语言的历史及个人拙见

    C语言是一个无限广阔的世界,你刚开始睁眼看它的时候以为视线的尽头就是边界,但当你慢慢走去,才发现天外有天.这或许就是江湖传说只有C才有真正高手的原因,或许我们也可以反过来说:C没有高手——因为没有人能 ...

  5. python爬虫_入门_翻页

    写出来的爬虫,肯定不能只在一个页面爬,只要要爬几个页面,甚至一个网站,这时候就需要用到翻页了 其实翻页很简单,还是这个页面http://bbs.fengniao.com/forum/10384633. ...

  6. SmartUpload相关类的说明

    ㈠ File类 这个类包装了一个上传文件的所有信息.通过它,可以得到上传文件的文件名.文件大小.扩展名.文件数据等信息. File类主要提供以下方法: 1.saveAs作用:将文件换名另存. 原型: ...

  7. November 10th, 2017 Week 45th Friday

    A little bit of mercy makes the world less cold and more just. 多一点怜悯就可以让这个世界少一点冷酷而多一点正义. Maybe there ...

  8. openlayer3 基础学习一创建&显示地图

    <!doctype html> <html lang="en"> <head> <link rel="stylesheet&qu ...

  9. AlloyDesigner 使用

    前端开发视觉是很重要的一部分,所以视觉的还原度很重要,今天给大家介绍一个很好用的视觉精度调整插件 一.下载AlloyDesigner插件 下载插件 二.保存视觉稿为图片格式 1.psd 用ps直接保存 ...

  10. NOI 2018网络同步赛(游记?)

    刚中考完那段时间比较无聊,报名了一个同步赛,报完名才发现成绩单是要挂到网上的,而且因为报的早给了一个很靠前的考号...那布星啊,赶紧学点东西,于是在一周内学了网络流,Treap以及一些数论. Day1 ...