Angular Checkbutton Behaviour wrong

Question

i have a big problem with the (probably) the scopes here but i cannot see through it.

I want to have my own css-modified tooglebuttons behave the same way, as the other buttons already do , i've tried to adopted it from this site:

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

Here my is my fiddle:

http://jsfiddle.net/fs0tL62s/

My second button is reacting to the values but i cannot control it differently.

Thx in advance.

My code is the following: my 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;
 }

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

and my 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>

Check out [mcve] and avoid posting link only questions. There's a reason SO won't let you post a question with only links to JSFiddle and no accompanying code. — Lex, Apr 11 '16 at 15:41
Sorry, i thought it would be not very productive to have it practically as a double amount of information. — Andrea, Apr 12 '16 at 07:39
@andrea Links disappear over time, hence a preference to have enough in your question that if the link breaks then it still makes sense as a question. Now you know. Welcome to SO :) — Nathan, Apr 12 '16 at 07:48

score 1 · Accepted Answer · answered Apr 12 '16 at 07:44

1

You have an id collision:

change the id for the last button (and the label "for" attribute to match it) to something different and it works.

<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

answered Apr 12 '16 at 07:44

Nathan

6,095
2
35
61

This already pushes me into the right direction, thanks! Makes sense that this is coupled... did not see it. Any idea to ingegrate a extensible version in a ng-repeat of that button? This would be a 1000% boost in my lil project here. – Andrea Apr 12 '16 at 21:18
@andrea You probably want to create your own directive. http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals Hope that helps :) – Nathan Apr 12 '16 at 21:23
Hi Nathan! I found the answer here: http://stackoverflow.com/questions/23655009/how-to-set-the-id-attribute-of-a-html-element-dynamically-with-angular-js provided by Thierry Marianne. For a presenting version, this approach is sufficient. For a real working one with feedback to the underlying system probably yours. Takes some time though. Still i can look happily forward to the weekend. Big thanks! :) – Andrea Apr 14 '16 at 12:05
Glad you got there. My pleasure, glad it helped ;) – Nathan Apr 14 '16 at 19:57

Angular Checkbutton Behaviour wrong

1 Answers1