Angularjs＆amp; Bootstrap ng-class问题

Question

我得到了这个小提琴http://jsfiddle.net/L60L3gv9/9/，当我匹配表格中的一个项目时，它突出显示：

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

虽然我期待这样的小提琴：

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

但是最后一个小提琴我必须在范围内声明其他变量。

为什么第一个小提琴的行为是这样的？

Answer 1

这是因为您使用.show课程。这将通过引导程序显示您的table-row作为块。

您有两种选择：

1。使用其他类名称，例如.highlight

2。将display: table-row !important;添加到.show

Answer 2

在之前的jsfiddle中，名称为<tr ng-repeat="x in names |filter:match" ng-class="{show: test==x.Country}">的{​​{1}}类正在应用。 show在引导程序中的CSS定义为show，这使得display: block !important;严格遵循tr级别元素。所以它在第一个例子中表现得很奇怪。

而latter没有block类已被使用。取而代之的是代码：show ng-class="{ 'red-background' : x.Name==myVar2 }">已使用自定义css类ng-class。

所以它在第二个例子中表现得很好。