Açısal Denetim Düğmesi Yanlış Davranışlar

Question

Burada muhtemelen büyük bir sorun var (muhtemelen) buradaki kapsamları göremiyorum.

Ben kendi css-modifiye tooglebuttons diğer düğmeler zaten yaptığı gibi, ben bu siteden benimsenen denedim, aynı şekilde davranır istiyorum: benim İşte

http://jsfiddle.net/opensas/ye6At/

benim keman:

http://jsfiddle.net/fs0tL62s/

Benim ikinci düğme değerlerine tepki ama farklı şekilde kontrol edemez.

Önceden Thx. benim CSS:

 .onoffswitch { 
    position: relative; 
    width: 92px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

.onoffswitch-checkbox { 
    display: none; 
} 

.onoffswitch-label { 
    display: block; 
    overflow: hidden; 
    cursor: pointer; 
    border: 2px solid #999999; 
    border-radius: 20px; 
} 

.onoffswitch-inner { 
    display: block; 
    width: 200%; 
    margin-left: -100%; 
    transition: margin 0.3s ease-in 0s; 
} 

.onoffswitch-inner:before, 
.onoffswitch-inner:after { 
    display: block; 
    float: left; 
    width: 50%; 
    height: 30px; 
    padding: 0; 
    line-height: 30px; 
    font-size: 12px; 
    color: white; 
    font-family: Trebuchet, Arial, sans-serif; 
    font-weight: bold; 
    box-sizing: border-box; 
} 

.onoffswitch-inner:before { 
    content: "Local"; 
    padding-left: 10px; 
    background-color: #34A7C1; 
    color: #FFFFFF; 
} 

.onoffswitch-inner:after { 
    content: "Remote"; 
    padding-right: 10px; 
    background-color: #EEEEEE; 
    color: #999999; 
    text-align: right; 
} 

.onoffswitch-switch { 
    display: block; 
    width: 22px; 
    margin: 4px; 
    background: #FFFFFF; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 58px; 
    border: 2px solid #999999; 
    border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 

benim JS:

Kodum şudur

angular.module('bootstrap', []).directive('button', function() { 
return { 
restrict: 'E', 
require: 'ngModel', 
link: function($scope, element, attr, ctrl) { 

    // ignore other kind of button groups (e.g. buttons-radio) 
    if (!element.parent('[data-toggle="buttons-checkbox"].btn-group').length) { 
    return; 
    } 

    // set/unset 'active' class when model changes 
    $scope.$watch(attr.ngModel, function(newValue, oldValue) { 
    element.toggleClass('active', ctrl.$viewValue); 
    }); 

    // update model when button is clicked 
    element.bind('click', function(e) { 
    $scope.$apply(function(scope) { 
     ctrl.$setViewValue(!ctrl.$viewValue); 
    }); 

    // don't let Bootstrap.js catch this event, 
    // as we are overriding its data-toggle behavior. 
    e.stopPropagation(); 
    }); 
} 
}; 
}); 

angular.module('sample', ['bootstrap']); 

function SampleController($scope) { 
console.log('model'); 
$scope.myModel = { 
}; 
} 

ve benim html: Bir id çarpışma var

<div ng-app="sample" ng-controller="SampleController"> 
<ul> 
<li>myModel.optionA:{{myModel.optionA}}</li> 
<li>myModel.optionB: {{myModel.optionB}}</li> 
</ul> 
<form class="form-inline"> 
<label class="checkbox"> 
    <input type="checkbox" ng-model="myModel.optionA"> A 
</label> 
<label class="checkbox"> 
    <input type="checkbox" ng-model="myModel.optionB"> B 
</label> 
</form> 
<div class="btn-group" data-toggle="buttons-checkbox"> 
<button type="button" ng-model="myModel.optionA" class="btn">A</button> 
<button type="button" ng-model="myModel.optionB" class="btn">B</button> 
<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"  
id="myonoffswitch" checked ng-model="myModel.optionB"> 
    <label class="onoffswitch-label" for="myonoffswitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 
<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"   
    id="myonoffswitch" checked ng-model="myModel.optionA"> 
    <label class="onoffswitch-label" for="myonoffswitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 
</div> 
</div> 

Answer 1

:

değişikliği son düğmenin kimliği (ve "for" özniteliği etiketini eşleştirmek için) farklı bir şeye ve işe yarar.

<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked ng-model="myModel.optionA"> 
    <label class="onoffswitch-label" for="myonoffswitch2"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 

Updated fiddle