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

发布时间：2020-12-17 08:33:47 所属栏目：安全来源：网络整理

导读：我正在使用ui-tabs在一个项目上使用AngularJS和UI-Bootstrap. 粗略的布局是这样的： uib-tabset uib-tab ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disab

我正在使用ui-tabs在一个项目上使用AngularJS和UI-Bootstrap.

粗略的布局是这样的：

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

我可以在标签名称中显示两个,因为我在这里做,这是有效的,所以在每个标签中,标签名称是名称：问题 – 回答总问题,即：’停车：1的5′.

我正在尝试做的是使用ng-class在这些数字相等时向选项卡添加“已完成”类,并且该选项卡中的所有问题都已得到解答.

我可以在选项卡中添加一个class =’complete’,这样可行,但是尝试使用ng-class根本不起作用,甚至ng-class =“complete”.

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

我担心你不能直接在ui-tab上使用ng-class.这里的问题是ui-tab的内容(和属性)被转换为 this.它有自己的ng-class,它会破坏你的.这是我设法找到/使??用的唯一解决方法.

像这样使用类和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';
}

希望对你有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!