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 实现开关控件

猜你喜欢
