1<div class="container" ng-app="app" ng-controller="mainController">
2
3 <div class="btn-switch" ng-class="{'btn-switch--on':toggle.switch}" ng-model="toggle.switch" ng-click="toggle.switch = !toggle.switch">
4
5 <div class="btn-switch-circle" ng-class="{'btn-switch-circle--on':toggle.switch}" ng-model="toggle.switch" ng-click="!toggle.switch = toggle.switch"></div>
6
7 </div>
8</div>
9<script>
10 var app = angular.module('app', ['ui.bootstrap'])
11 app.controller('mainController', function($scope) {
12
13 $scope.toggle = {};
14 $scope.toggle.switch = false;
15
16});
17</script>
18<style>
19 .container {
20 width: 50px;
21 margin: 50px auto;
22}
23
24.btn-switch {
25 position: relative;
26 display: block;
27 width: 50px;
28 height: 25px;
29 cursor: pointer;
30 background-color: #F27878;
31 border: 2px solid #F27878;
32 border-radius: 40px;
33
34 .btn-switch-circle {
35 position: absolute;
36 top: 0;
37 left: 0;
38 display: block;
39 height: 25px;
40 width: 25px;
41 background-color: #fff;
42 border-radius: 40px;
43 }
44}
45
46.btn-switch--on {
47 background-color: #80CDBE;
48 border: 2px solid #80CDBE;
49
50 .btn-switch-circle--on {
51 left: auto;
52 right: 0;
53 }
54}
55 </style>
56