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

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

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

使用ng-style指令
在要显示的class属性的css中使用！important（例如background-color：＃dff0d8！important;用于突出显示类）

项目＃1可能是更好的方式，但两者都应该有效。

Angular ng-class和bootstraps css

1 个答案: