Question

我对这里的（可能）范围有一个很大的问题，但是我无法看透它。

我想让自己的css修改过的toogle按钮的行为方式与其他按钮的行为方式相同，我试图从这个网站采用它：

这是我的小提琴：

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

提前谢谢。

我的代码如下：我的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（以及＃34;＆＃34;属性与之匹配）更改为不同的内容，并且可以正常工作。

<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

角度检查按钮行为错误

1 个答案: