0

如果选项卡重复，我一直在尝试更改课程，具体取决于选项卡的标题。如下所示的片段

 <tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{{tab.title}} === 'Logs' ? 'pull-right' : ''" active="tab.active">
            <div class="col-md-12">
                <div ng-include="tab.content">
                </div>
            </div>
        </tab>

但它不起作用。我尝试将 tab.title 更改为 $index。

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-class="{{$index}} === 1 ? 'pull-right' : ''">
            <div class="col-md-12">
                <div ng-include="tab.content">
                </div>
            </div>
        </tab>

尝试用 {} 和 {{}} 将其包围或不包围。但仍然。没有任何作用。

谁能告诉我我在这里做错了什么？

一如既往，感谢您的宝贵时间。

- - 编辑 - - - - -

好吧，我找到了一个有解决方法的帖子。不知道会发生什么。但它有效。如下所示的片段

              <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" class="{{ tab.title == 'Logs' ? 'pull-right':'' }} ">
            <div class=" col-md-12">
            <div ng-include="tab.content">
            </div>

4

2 回答 2

2

您应该将此语法用于ng-class. 首先是您要设置的类名，其次是要检查的条件。一旦符合条件，就会添加类名。

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{ 'pull-right': tab.title == 'Logs' }" active="tab.active">
    <div class="col-md-12">
        <div ng-include="tab.content">
        </div>
    </div>
</tab>
于 2015-09-15T14:50:10.663 回答
0

如docs 中所述， value ofng-class是一个表达式，可以计算为字符串、对象或数组。这意味着您不必在{{}}那里使用：简单...

ng-class="tab.title === 'Logs' ? 'pull-right' : ''"

……应该够了。事实上，把它写成一个对象更简洁：

ng-class="{'pull-right':tab.title === 'Logs'}"

可悲的是，这不会解决您的问题，因为您正在尝试应用ng-class自定义指令（使用 angular-ui Bootstrap 包创建）。该指令ng-class在其自己的模板中使用：

<li ng-class="{active: active, disabled: disabled}">
  <a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
</li>

...并且它是在replace标志设置为 true 的情况下创建的。这实际上意味着ng-class您提供的值将与模板提供的值粘合在一起，从而产生如下丑陋的东西：

<li ng-class="tab.title === 'Logs' ? 'pull-right' : '' {active: active, disabled: disabled}">

那肯定不会按计划进行。事实上，在项目中心注册了一个相关问题 ( #1741 ) - 以以下评论结束：

在使用ng-class的指令上使用replace: true是一个非常糟糕的主意。周围有很多问题replace: true，甚至谈论弃用/删除它。但是，不幸的是，它不会很快消失，核心 Angular 团队发布的警告是使用它，但这样做是有风险的。即，使用它知道不正确地使用它会破坏您的 DOM。

我怀疑这个问题不会得到解决。

一种可能的解决方法是使用带有 Angular 表达式作为其值的原生类：

class="{{tab.title === 'Logs' ? 'pull-right' : ''}}"

这不会与<tab>模板类合并，因为那里没有这样的东西 - 你很清楚！

于 2015-09-16T11:45:56.910 回答