AngularJS和UI-Bootstrap標籤，使用ng-class修改標籤

我正在使用ui-tabs使用AngularJS和UI-Bootstrap進行項目。AngularJS和UI-Bootstrap標籤，使用ng-class修改標籤

粗糙佈局是這樣的：

<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：「計數」是計算在反覆標籤對象的「計數」字段的總和的過濾器。這跟蹤已經回答的問題，並且tab.Questions.length統計標籤中重複出現的問題的數量。

我可以在標籤名稱中顯示這兩個選項，因爲我在此處執行此操作，因此每個選項卡中的Tab名稱都是名稱：問題 - 回答的總問題，即：'Parking：1 of 5 」。

我想要做的是當這些數字相等時，使用ng-class將「已完成」類添加到選項卡，並且該選項卡中的所有問題都已得到解答。

我可以添加一個類='完整'的選項卡，並且工作，但試圖使任何使用ng-class根本不起作用，甚至不ng-class =「complete」。

有沒有辦法做到這一點？ ng-class可以和uib-tabs一起使用嗎？是否有其他機制來評估表達式並修改選項卡上的類？

來源

2015-11-26 Stephen R. Smith

恐怕你不能直接在ui-tab上使用ng-class。這裏的問題是ui-tab的內容（和屬性）被轉錄爲this。哪個有它自己的ng-class這是破壞你的。這是我設法找到/使用的唯一解決方法。

使用像這樣納克級沿着類：

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

但是請注意，這complete必須是一個字符串，它才能正常工作。如果它是一個布爾那麼你可能有更好的運氣，這樣做的：

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

你應該需要把多個類，然後我會創建一個字符串返回類的函數：

<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'; 
}

希望能對你有所幫助。

來源

2015-11-26 19:49:02 jsonmurphy

非常感謝jsonmurphy！這一直讓我的頭部受傷一段時間，而且這一切都像一個魅力！

最後的語法是這樣的：

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

然後這些添加到CSS：

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

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

這決定了整個標籤銀的標籤背景時，在該選項卡中的所有問題都得到了回答。 li.completed和li.active.completed涵蓋了當前選項卡（.active）和選項卡完成時的選項，而不是當前選項卡。它們本來可以寫成一條規則，但爲了清楚起見，我將它們分開。

來源

2015-11-27 04:04:08

AngularJS和UI-Bootstrap標籤，使用ng-class修改標籤

回答

相關問題