toggle switch angularjs
<div class="container" ng-app="app" ng-controller="mainController">
<div class="btn-switch" ng-class="{'btn-switch--on':toggle.switch}" ng-model="toggle.switch" ng-click="toggle.switch = !toggle.switch">
<div class="btn-switch-circle" ng-class="{'btn-switch-circle--on':toggle.switch}" ng-model="toggle.switch" ng-click="!toggle.switch = toggle.switch"></div>
</div>
</div>
<script>
var app = angular.module('app', ['ui.bootstrap'])
app.controller('mainController', function($scope) {
$scope.toggle = {};
$scope.toggle.switch = false;
});
</script>
<style>
.container {
width: 50px;
margin: 50px auto;
}
.btn-switch {
position: relative;
display: block;
width: 50px;
height: 25px;
cursor: pointer;
background-color: #F27878;
border: 2px solid #F27878;
border-radius: 40px;
.btn-switch-circle {
position: absolute;
top: 0;
left: 0;
display: block;
height: 25px;
width: 25px;
background-color: #fff;
border-radius: 40px;
}
}
.btn-switch--on {
background-color: #80CDBE;
border: 2px solid #80CDBE;
.btn-switch-circle--on {
left: auto;
right: 0;
}
}
</style>