我正在使用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';
}
希望对你有所帮助.
