AngularJS和UI-Bootstrap选项卡，使用ng-class修改选项卡

问题描述

我正在使用带有ui-tabs的项目使用AngularJS和UI-Bootstrap.

I'm working with AngularJS and UI-Bootstrap on a project with ui-tabs.

粗略的布局是这样的:

<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来计数在选项卡中重复的问题数.

sumByKey:'count' is a filter that calculates the sum of the 'count' field in the repeated tab object. This tracks questions that have been answered, and tab.Questions.length counts the number of questions repeated in the tab.

我可以在此处同时在选项卡名称中显示这两个名称，并且都可以，所以在每个选项卡中，选项卡名称都是名称:总问题的答案，即:停车位:5之1"

I can display both in the tab name as I'm doing here, and this works, so in each tab the Tab name is the name : questions-answered of total-questions, i.e.: 'Parking: 1 of 5'.

我想做的是，当这些数字相等且该选项卡中的所有问题均已回答时，使用ng-class向该选项卡添加一个"completed"类.

What I'm trying to do is use ng-class to add a 'completed' class to the tab when these numbers are equal, and all the questions in that tab have been answered.

我可以在选项卡上添加class ='complete'，并且可以，但是尝试使用ng-class根本不起作用，甚至ng-class ="complete"也不能.

I can add a class='complete' to the tab, and that works, but trying to make any use of ng-class doesn't work at all, not even ng-class="complete".

有没有办法做到这一点? ng-class可以与uib-tabs一起使用吗?还有其他机制可用来评估表达式并修改选项卡上的类?

Is there a way to do this? Can ng-class be used with uib-tabs? Is there some other mechanism to evaluate an expression and modify the class on the tab?

推荐答案

恐怕您不能直接在ui-tab上使用ng-class.这里的问题是ui-tab的内容(和属性)被分解为此.它有自己的ng-class困扰着您.这是我设法找到/使​​用的唯一解决方法.

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.

将类和ng-class一起使用:

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>

但是，请注意，complete必须是字符串才能正常工作.如果它是布尔值，那么您可能会做得更好:

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>

在控制器中:

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

希望对您有所帮助.

这篇关于AngularJS和UI-Bootstrap选项卡，使用ng-class修改选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！