javascript - Angular ng-class 和 bootstraps css

Question

我正在使用 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;}

我想知道这个类是否用于覆盖我想要的“亮点”。

有什么办法可以解决吗？

Answer 1

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

解决方法是执行以下操作:

1. 要么使用 ng-style 指令

2. 在要显示的类属性的 css 中使用 !important(例如 background-color: #dff0d8 !important; 用于突出显示类)

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