下面是实现效果：
AngularJS 实现代码:
ro.directive('toggle',[function(){
return {
restrict: 'E',replace: true,scope:{
'ngModel':'='
},template:'<label class="ro-switch"><input type="checkBox" ng-model="ngModel" ng-checked="ngModel"><div class="slider"><div class="slider-thumb"></div></div></label>',link:function(scope,elm,attr){
}
}
}]);
CSS端代码:
/* switch 开关 */
.ro-switch{
display: inline-block;cursor:pointer;
> input{display: none;}
.slider{
padding: 2px 25px 2px 3px;
background:#CCCCCC;
> .slider-thumb {
width:18px;height:18px;background:#FFF;
}
transition: padding 0.2s ease-in-out,background 0.2s ease-in-out;
}
> input:checked + .slider{background:#2196F3;padding: 2px 3px 2px 25px;}
}
原文地址：https://www.jb51.cc/angularjs/148997.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
