Angularjs & Bootstrap ng-class issue

Question

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 :

http://jsfiddle.net/nmcsr5x9/1/

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

Any ideas why the first fiddle is acting like that ?

Can you please tell me which variable you are talking about? as I'm seeing both 'test' in first and 'myVar' in second in the scope. — agm92
– agm92, Commented Feb 8, 2016 at 13:17
Ok, so both myVar,myVar2 in second is in Scope and test in first is in scope so what exactly you wanted to know? both are same. — agm92
– agm92, Commented Feb 8, 2016 at 13:23
i'm not fighting against a javascript issue but rather a css issue that I don't get — AshBringer
– AshBringer, Commented Feb 8, 2016 at 13:26

anton · Accepted Answer · 2016-02-10 09:36:07Z

3

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

edited Feb 10, 2016 at 9:36

answered Feb 8, 2016 at 13:32

anton

1681 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shashank · Accepted Answer · 2016-02-08 13:28:42Z

1

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.

answered Feb 8, 2016 at 13:28

Shashank

2,1002 gold badges21 silver badges40 bronze badges

1 Comment

AshBringer Over a year ago

Do you have an idea of fixing it using the first fiddle ?

Collectives™ on Stack Overflow

Angularjs & Bootstrap ng-class issue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related