Angularjs 和 Bootstrap ngclass 问题答案

【问题标题】：Angularjs & Bootstrap ng-class issueAngularjs 和 Bootstrap ngclass 问题
【发布时间】：2016-02-10 17:36:07
【问题描述】：

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

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

而我期待像这个小提琴这样的东西：

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

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

你知道为什么第一把小提琴会这样吗？

【问题讨论】：

你能告诉我你说的是哪个变量吗？正如我在范围内看到的第一个“test”和第二个“myVar”一样。
在第二把小提琴中，我有myVar 和myVar2
好的，所以第二个 myVar,myVar2 都在范围内，test 在第一个范围内，那么您到底想知道什么？两者都是一样的。
我不是在与 javascript 问题作斗争，而是在与我没有得到的 css 问题作斗争

标签： css angularjs twitter-bootstrap-3

【解决方案1】：

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

你有两个选择：

1.使用另一个类名，例如.highlight

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

【讨论】：

【解决方案2】：

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

而在latter 中没有使用show 类。代替代码：ng-class="{ 'red-background' : x.Name==myVar2 }"> 和 ng-class 具有自定义 css 类 red-background 已被使用。

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

【讨论】：

你有没有用第一把小提琴来修复它的想法？