.app(ng-app='app' ng-controller='mainCtrl as vm')
.container
.row
.col-xs-12
h1 Angular Bootstrap Toggle Switch
hr
.row
.col-xs-12
h2 Form Default
.form
.form-group
label(for='cb1') label cb1
input#cb1.switchCheckbox.checkbox(type='checkbox')
toggle-switch(toggle-state='false')
hr
.row
.col-xs-12
h2 Form Horizontal
.form-horizontal
.form-group
label.col-xs-2(for='cb2') label cb2
.col-xs-10
input#cb2.checkbox.switchCheckbox(type='checkbox')
toggle-switch(toggle-state='true')
hr
.row
.col-xs-12
h2 Form Inline
.form-inline
.form-group
label(for='cb3') label cb3
input#cb3.checkbox.switchCheckbox(type='checkbox')
toggle-switch(toggle-state='true' toggle-size='32' toggle-br='0.15')
hr
script(type='text/ng-template' id="templ.toggle")
.toggleSwitchWrap(ng-class="{'switchOn':toggleState }" ng-style="vm.wrapStyle")
.toggleBase(ng-style="vm.baseStyle")
.toggleSwitch(ng-style="vm.switchStyle")$switchOffColor: #ccc;
$switchOnColor: #8BC34A;
$switchBorderRadius: 1em;
input.switchCheckbox {
display: none !important;
}
.toggleSwitchWrap {
//font-size: 18px;
.toggleBase {
width: 4em;
height: 2em;
background: $switchOffColor;
transition: background 0.1s;
}
.toggleSwitch {
width: 2em;
height: 2em;
background: white;
border: 0.25em solid $switchOffColor;
margin-left: 0;
transition: margin-left 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}
&.switchOn {
.toggleBase {
background: $switchOnColor;
}
.toggleSwitch {
margin-left: 2em;
border-color: $switchOnColor;
}
}
& {
.toggleBase, .toggleSwitch {
//border-radius: $switchBorderRadius;
}
}
}
.form-inline {
.toggleSwitchWrap {
display: inline-block;
}
}const foo = 'dfsfsfdfsdfsfffdsfsfsdfdsfsdf';
angular.module('app',[])
.controller('mainCtrl', mainCtrl)
.directive('toggleSwitch', toggleSwitch)
mainCtrl.$inject = ['$scope'];
function mainCtrl($scope) {
const vm = this;
vm.toggleState = true;
}
function toggleSwitch() {
const directive = {
replace: true,
scope: {
toggleState: "=",
toggleSize: "=",
toggleBr: "="
},
templateUrl: 'templ.toggle',
link: linkFunc,
controller: ctrlr,
controllerAs: 'vm',
bindToController: true
}
return directive
function linkFunc(scope, el, attr) {
el.on('click',(e)=>{
scope.toggleState = !scope.toggleState;
scope.$apply(scope);
console.log(scope);
});
}
function ctrlr($scope) {
const vm = this;
const ts = vm.toggleSize | 16;
const tbr = vm.toggleBr | 1;
vm.wrapStyle = {
'font-size': `${ts}px`
}
vm.baseStyle = {
'border-radius': `${tbr}em`
}
vm.switchStyle = {
'border-radius': `${tbr}em`
}
console.log(vm);
}
}