AngularJS e schede Bootstrap UI, utilizzando la classe ng per modificare la scheda

Question

Sto lavorando con AngularJS e UI-Bootstrap su un progetto con le schede ui.

Il layout grezzo è questo:

<uib-tabset> 
    <uib-tab 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> 

sumByKey: 'count' è un filtro che calcola la somma del campo 'count' nell'oggetto scheda ripetuta. Questo tiene traccia delle domande a cui è stata data una risposta e tab.Questions.length conta il numero di domande ripetute nella scheda.

Posso visualizzare sia nel nome di tabulazione come sto facendo qui, e questo funziona, quindi in ogni scheda il nome della scheda è il nome: domande-risposta di domande totali, vale a dire: 'Parcheggio: 1 di 5 '.

Quello che sto cercando di fare è usare ng-class per aggiungere una classe 'completata' alla scheda quando questi numeri sono uguali, e tutte le domande in quella scheda hanno avuto risposta.

Posso aggiungere una classe = 'completa' alla scheda, e questo funziona, ma provare a fare qualsiasi uso di ng-class non funziona affatto, nemmeno ng-class = "completo".

C'è un modo per farlo? È possibile utilizzare ng-class con le linguette Uib? C'è qualche altro meccanismo per valutare un'espressione e modificare la classe nella scheda?

Answer 1

Ho paura che non è possibile utilizzare ng-class direttamente sul ui-tab. Il problema qui è che il contenuto (e gli attributi) di ui-tab è trancluded in this. Che ha il suo ng-class che ti sta rovinando. Ecco l'unica soluzione che sono riuscito a trovare/utilizzare.

Usa classe insieme a ng-classe come questa:

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

Si noti, tuttavia, che complete dovrà essere una stringa per farlo funzionare correttamente. Se la sua un valore booleano allora il vostro probabilmente avere più fortuna fare:

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

se avete bisogno di mettere più classi poi mi piacerebbe creare una funzione che restituisce le classi in una stringa:

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

controller :

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

Spero che ti aiuti un po '.

Answer 2

Mille grazie jsonmurphy! Questo mi ha fatto male alla testa per un po 'di tempo, e questo ha funzionato come un incantesimo!

sintassi finale è questo:

class="{{ (tab.Questions|sumByKey:'count') == (tab.Questions.length) ? 'completed' : ''}}" 

quindi aggiunto questi al CSS:

li.completed a.ng-binding{ 
    background-color: silver; 
} 

li.active.completed a.ng-binding{ 
    background-color: silver; 
} 

Questo imposta lo sfondo scheda per l'intera scheda di argento quando tutte le domande in quella scheda sono stati risposta. La copertina li.completed e li.active.completed sia quando la scheda è attualmente selezionata (.active), sia quando la scheda è completata ma non nella scheda corrente. Potrebbero essere stati scritti come una singola regola, ma li ho tenuti separati per chiarezza.