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>
