Hinrich Hinrich - 5 months ago 204
AngularJS Question

Configure Angular UI Button

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

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.