<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <title>Document</title> <Linkrel= "stylesheet"type= "Text/css"href= "./libs/bootstrap/css/bootstrap.min.css"> <Linkrel= "stylesheet"type= "Text/css"href= "./libs/bootstrap/css/bootstrap-switch.min.css"> <Linkrel= "stylesheet"type= "Text/css"href= "./libs/bootstrap/css/style.css"></Head><BodyNg-app= "MyApp" > <!--Demo - <DivNg-controller= "Myctra"> <Buttontype= "button"Ng-click= "Test ()" >Biggg</Button> <!--Control - <!--<my-input model= "x" fun = "Sub" ></my-input> - <inputtype= "checkbox"name= "Switch"checked/> </Div> <Scripttype= "Text/javascript"src= "./libs/angular.min.js"></Script> <Scripttype= "Text/javascript"src= "./libs/jquery-3.3.1.min.js"></Script> <Scripttype= "Text/javascript"src= "./libs/bootstrap/js/bootstrap-switch.min.js"</script> <Script Type="Text/javascript"src="./libs/bootstrap/js/bootstrap.min.js"></Script> <Scripttype= "Text/javascript"> varAppmodule=Angular.module ('MyApp', []); Appmodule.controller ('Myctra',['$scope',function($scope) {$scope. Persons= ['wo','You're','his']; $scope. x= true; $scope. Test= function() {Console.log ($scope. x); }; $scope. Sub= function(state) {Console.log (state); }; varC= $("[name= ' switch ']"); C.bootstrapswitch (' State', $scope. x); //true | | falseC.on ('Switchchange.bootstrapswitch', function{event, state} {$scope. Sub (state);//true | false }); }]); //Controlappmodule.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); varC=$ (element[0]). Children (); C.bootstrapswitch (' State', Scope.model); //true | | falseC.on ('Switchchange.bootstrapswitch', function(event, state) {scope.fun (state); }); } } }); </Script></Body></HTML>
Angularjs+bootstrap-switch Implementing a switch control