Question

我一直试图改变一个类，如果一个重复的标签，取决于标签的标题。下面显示的代码段

 <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>

使用{}和{{}}尝试使用和不使用它。但仍然。什么都行不通。

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

一如既往，谢谢你的时间。

---- EDIT ---------

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

              <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>

Answer 1

您应该将此语法用于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>

Answer 2

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

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

......应该足够了。事实上，将它作为一个对象写得更清晰：

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

可悲的是，由于您正试图将ng-class应用于自定义指令（使用angular-ui Bootstrap包创建），因此无法解决您的问题。该指令使用its own template中的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>模板类合并，因为那里没有这样的东西 - 而且你很清楚要去！

ng-class如果不使用重复值

2 个答案: