AngularJS and UI-Bootstrap Tabs, using ng-class to modify tab
I'm afraid you can't use ng-class
directly on the ui-tab
. The issue here is that the contents (and attributes) of the ui-tab
is trancluded into this. Which has its own ng-class
that's clobbering yours. Heres the only workaround I've managed to find/use.
Use class along with ng-class like this:
<uib-tabset>
<uib-tab class="{{complete}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">
<!-- Repeated Content -->
</uib-tab>
</uib-tabset>
Note, however, that complete
will have to be a string for it to work properly. If its a boolean then your probably have better luck doing:
<uib-tabset>
<uib-tab class="{{complete ? 'complete':''}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">
<!-- Repeated Content -->
</uib-tab>
</uib-tabset>
Should you need to put multiple classes then I'd create a function that returns the classes in a string:
<uib-tabset>
<uib-tab class="{{isCompleted}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">
<!-- Repeated Content -->
</uib-tab>
</uib-tabset>
In controller:
$scope.isCompleted = function () {
// some logic
return 'complete done';
}
Hope that helps you somewhat.