AngularJS ve UI-Bootstrap Sekmeleri, sekme değiştirilecek sekme kullanarak

Question

Ugular sekmeli bir projede AngularJS ve UI-Bootstrap ile çalışıyorum.

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

kaba düzeni bu 'sayısı' tekrar tekrar sekme nesne 'sayısı' alanı toplamını hesaplar bir filtredir. Bu, yanıtlanmış soruları izler ve tab.Questions.length sekmede tekrarlanan soruların sayısını sayar.

Burada yaptığım gibi sekme adında ikisini de gösterebilirim ve bu işlem her sekmede Sekme adıdır: soruların toplamı olan soruların yanıtı: 'Otopark: 1/5 '.

Yapmaya çalıştığım şey, bu sayılar eşit olduğunda sekmeye 'tamamlanmış' bir sınıf eklemek için ng-sınıfını kullanmak ve bu sekmedeki tüm sorular yanıtlandı.

Sekme için bir class = 'complete' ekleyebilirim ve işe yarayabilir, ancak ng-class'ın herhangi bir şekilde kullanılmaya çalışılması bile ng-class = "complete" bile işe yaramıyor.

Bunu yapmanın bir yolu var mı? Ng-class uib-tabs ile kullanılabilir mi? Bir ifadeyi değerlendirmek ve sınıfı sekmede değiştirmek için başka bir mekanizma var mı?

Answer 1

Korkarım ki ng-class'u doğrudan ui-tab'dan kullanamazsınız. Buradaki sorun, ui-tab'un içeriğinin (ve niteliklerinin) this'a aktarılmasıdır. Hangi senin kendi yutturmaca olan kendi ng-class var. Heres bulmayı/kullanmayı başarabildiğim tek çözüm. Böyle ng-sınıfı ile birlikte

Kullanım sınıfı:

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

Ancak, bu complete düzgün çalışması için bir dize olması gerekir.

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

sonra ben bir dize sınıfları döndüren bir işlev oluşturmak istiyorum birden sınıfları koymak gerekirse: bir boolean onun o zaman senin muhtemelen daha iyi şanslar yaptırıyorsun

kontrolörü olarak

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

:

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

Bu size yardımcı olur umarım.

Answer 2

Çok teşekkürler jsonmurphy! Bu başımı bir süre incitti ve bu bir cazibe gibi çalıştı! o sekmede tüm sorular olmuştur, bu gümüşe tüm sekme için sekme arka ayarlar

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

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

:

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

Sonra CSS bu ekledi:

Final sözdizimi şudur cevap verdi. Tamamlanmış ve li.aktif tamamlanmış kapak, hem sekme seçildiğinde (etkin), hem de sekme tamamlandığında ancak geçerli sekmede değilken örtülür. Tek bir kural olarak yazılabilirlerdi, ama onları açıklık için ayrı tuttular.