Angular ng-class 和引导 css答案

【问题标题】：Angular ng-class and bootstraps cssAngular ng-class 和引导 css
【发布时间】：2015-10-28 15:58:45
【问题描述】：

我正在使用 bootstrap 中的“table-striped”和 angularjs 中的“ng-class”来呈现表格。这个想法是显示条纹表，当单击一行时，它会突出显示。

由于在奇数行上“单击”而从 chrome 复制以下内容。

<div class="table-responsive" id="Destination">
    <table class="table table-striped" id="destinationTable">
    <thead>
...
    </thead>
    <tbody>
        <!-- ngRepeat: entity in destinations -->
        <tr ng-repeat="entity in destinations" ng-click="setName()" ng-class="{'highlight' : destinationName == entity.name}" class="ng-scope highlight">

    </tbody>
    </table>
</div>

如您所见，“class="ng-scope highlight" 已经由 angularjs 在该行生成，但它只是没有生效。

我也很奇怪，同样的代码对偶数行也很有效。我看不出奇数行点击和偶数行点击的 html 有什么区别。

在“bootstrap.css”中有，

.table-striped > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}

我想知道这个类被应用来覆盖我想要的那个'highlight'。

有办法解决吗？

【问题讨论】：

单击哪一行时，您的目标更改类是否为“突出显示”？我错了吗？
是的，弗坎。我希望它更改为“突出显示”。我注意到，bootstrap "background-color: #f9f9f9" 中的那个优先于 "highlight" 中的那个，即 background-color: #d0e4fe。我可以添加“！important”，它确实有效。但它是最近的 css 类优先吗？

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

我遇到了同样的问题，它似乎与表格条带化中的 css 有关。

一种解决方法是执行以下操作：

要么使用 ng-style 指令
在要显示的类属性的 css 中使用 !important（例如 background-color: #dff0d8 !important; 用于突出显示类）

第 1 项可能是更好的方法，但两者都应该有效。

【讨论】：