Angular ng-class and bootstraps css

Question

I am using 'table-striped' from bootstrap and 'ng-class' from angularjs to present a table. The idea is to show striped table and when click on one row, it is highlighted.

The following is copied from chrome as a result of 'click' on odd row.

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

As you can see, "class="ng-scope highlight" is already generated by angularjs on that row, but it just not take effect.

Also it is strange to me the same code works well for even row. I don't see the difference of the html between that from odd row click and that from the even row click.

In the "bootstrap.css", it has,

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

I am wondering this class in applied to overwrite the one I want, the 'highlight'.

Is there anyway to solve it?

Answer 1

I faced the same issue and it seemed to have to do with the css in the table striping.

A workaround would be to do the following:

1. Either use ng-style directive

2. Use !important in the css of the class attribute you want to show ( for example background-color: #dff0d8 !important; for your highlight class )

   Item #1 is probably the better way to go here but both should work.