AngularJS 和 UI-Bootstrap Tabs，使用 ng-class 修改 tab [英] AngularJS and UI-Bootstrap Tabs, using ng-class to modify tab

问题描述

我正在一个带有 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:'count' 是一个过滤器，用于计算重复选项卡对象中的 'count' 字段的总和.这会跟踪已回答的问题，并且 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 向选项卡添加一个已完成"类，并且该选项卡中的所有问题都已回答.

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.

像这样使用 class 和 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 Tabs，使用 ng-class 修改 tab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！