angularjs开发ios风格的toggle

<div class="toggle-box" ng-click="item.hide_remind = !item.hide_remind"
     ng-class="{'active':item.hide_remind,'':!item.hide_remind}" ng-init="item.hide_remind=0">
    <div class="toggle-container">
        <div class="toggle-item"></div>
    </div>
</div>

.site-create .page-bd .container form .form-group .toggle-box {
  position: absolute;
  right: 48px;
  top: 15px;
}
.site-create .page-bd .container form .form-group .toggle-box .toggle-container {
  position: relative;
  width: 72px;
  height: 40px;
  background: #a8aeb3;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  padding: 2px;
}
.site-create .page-bd .container form .form-group .toggle-box .toggle-container .toggle-item {
  width: 39px;
  height: 39px;
  background: white;
  -webkit-border-radius: 39px;
  -moz-border-radius: 39px;
  border-radius: 39px;
  cursor: pointer;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}
.site-create .page-bd .container form .form-group .toggle-box.active .toggle-container {
  background: #79e575;
}
.site-create .page-bd .container form .form-group .toggle-box.active .toggle-container .toggle-item {
  margin-left: 32px;
}