Durendal February 2016

Angularjs & Bootstrap ng-class issue

I got this fiddle http://jsfiddle.net/L60L3gv9/9/ where when I match an item in the table, it highlights it with :

ng-class="{show: test==x.Country}"

Whereas I'm expecting something like in this fiddle :


but with the last fiddle I have to declare other variables in the scope.

Any ideas why the first fiddle is acting like that ?


Shashank February 2016

In the former jsfiddle, in <tr ng-repeat="x in names |filter:match" ng-class="{show: test==x.Country}"> class with name show is getting applied. The show has a CSS definition in bootstrap as display: block !important; which makes tr to follow block level element strictly. So it behaves weirdly in the first example.

Whereas in the latter no show class has been made use of. Instead code: ng-class="{ 'red-background' : x.Name==myVar2 }"> with ng-class having custom css class red-background has been used.

So it behaves good in the second example.

anton February 2016

It's because you use .show class. This will display your table-row as block by bootstrap.

You have two options:

1. use another class name, like .highlight

2. add display: table-row !important; to .show

Post Status

Asked in February 2016
Viewed 1,446 times
Voted 11
Answered 2 times


Leave an answer