Customizing Angular UI Button

Question

I have an 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> 

It works great.

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

uibButtonConfig default uibButtonConfig

activeClass (Default: active ) - The class to apply to the marked buttons.

But I don’t understand how exactly this should be done; nowhere could I find examples.

Answer 1

In the controller, you can enter uibButtonConfig and set the classes for the active button.

Example

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

See Plnkr

I set the active class grey , which changes the background of the active button to gray.