javascript - Angular Checkbutton 行为错误

Question

我对这里的(可能)范围有很大的疑问，但我看不透它。

我想让我自己的经过 css 修改的 tooglebuttons 的行为方式与其他按钮一样，我已经尝试从该站点采用它:

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

这是我的 fiddle :

http://jsfiddle.net/fs0tL62s/

我的第二个按钮对值有反应，但我无法以不同方式控制它。

提前致谢。

我的代码如下:我的 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;
 }

我的JS:

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 = {
};
}

和我的 html:

<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

你有一个 id 冲突:

将最后一个按钮的 id(以及与之匹配的标签“for”属性)更改为不同的东西并且它有效。

<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