Configure Angular UI Button

Question

I have a angular-ui button that looks like this:

<button uib-btn-checkbox ng-model="sortReverse" class="btn btn-default" ng-init="sortReverse=true"> <i class="fa" ng-class="{'fa-sort-asc': sortReverse===true,'fa-sort-desc': sortReverse===false}"></i></button>

This works fine.

Every time the model turns true, the active class is applied to the element. In the docs they say you can change the class name of the checked button. Here is the quote:

Default settings uibButtonConfig

activeClass (Default: active) - Class to apply to the checked buttons.

But i do not understand how exactly this should be done, could not find examples anywhere.

Answer 1

In your controller you can inject uibButtonConfig and set the classes to be applied for active button.

Example

.controller('UibButtonsController', ['uibButtonConfig', function(buttonConfig) {
  buttonConfig.activeClass = 'your-class-name';
}])

See Plnkr

I have set active class grey that changes the background of active button to grey color.