AngularJS y UI-Bootstrap Tabs, usando ng-class para modificar la pestaña

Solución:

Me temo que no puedes usar ng-class directamente en el ui-tab. El problema aquí es que el contenido (y los atributos) de la ui-tab se incluye en esto. Que tiene lo suyo ng-class eso está golpeando al tuyo. Esta es la única solución que he logrado encontrar / usar.

Use class junto con ng-class de esta manera:

<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>

Sin embargo, tenga en cuenta que complete tendrá que ser una cuerda para que funcione correctamente. Si es un booleano, probablemente tengas mejor suerte haciendo:

<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>

Si necesita poner varias clases, crearía una función que devuelva las clases en una cadena:

<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>

En controlador:

$scope.isCompleted = function () {
    // some logic
    return 'complete done';
}

Espero que te ayude un poco.

---

---

Utiliza Nuestro Buscador