CODEWITHSUNDEEP
angularjsangular-ui
ps0604
ps0604

Reputation: 1081

Cannot change background color of checkbox button in Angular UI

In this plunk I have an Angular UI checkbox button that when active (i.e. pushed) needs to display yellow background with red fonts. That means that if you click multiple times, the colors should change from yellow background to blue background and so on. Still, since when you click the button has the focus, it doesn't change the colors and the background is always blue. How to fix this?

HTML

  <style>
    .my-active-class {
      background-color: yellow;
      color: red;
    }
  </style>

  <div ng-controller="ButtonsCtrl">
   <buttondir></buttondir>
  </div>

Javascript

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ButtonsCtrl', function($scope) {
});

app.directive('buttondir', function (uibButtonConfig) {

    uibButtonConfig.activeClass = 'my-active-class';

    var directive = {};

    directive.restrict = 'EA';

    directive.scope = {
      control: '='
    };

    directive.template = '<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox ' +
    ' btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle </button>';

    directive.link = function (scope, element, attrs) {
      scope.singleModel = 1;
    };

    return directive;

});

Upvotes: 0

Views: 781

Answers (1)

Varit J Patel
Varit J Patel

Reputation: 3520

Hi Please find the updated answer here!

The problem was that .btn-primary:focus is also applying with .my-active-class

So In solution to that, I have override bootstrap by default class to .my-active-class

.my-active-class, .my-active-class:focus {
  background-color: yellow;
  color: red;
}

Please find working plunker here: http://plnkr.co/edit/PuNRtiTZ25JV0zJL1UCn?p=preview

Cheers!

Upvotes: 1

Related Questions