Angularjs 实现 switch 开关

Posted 2022-12-13 bywayboy

下面是实现效果：

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;
  > inputdisplay: 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 + .sliderbackground:#2196F3;padding: 2px 3px 2px 25px;