css - ng-class 风格不适用

Question

我正在根据 ng-repeat 中数组的值更新 div 标签中文本的颜色。我调试时该值设置正确，但颜色设置不正确。

<div ng-class="sel.fav == 'Y' ? 'fz-horse-name-green' : 'fz-horse-name'">{{sel.sel_name}} : {{sel.fav}}</div>

我的 CSS 类是:

.fz-horse-name-green{
    display: table-cell;
    width: 40%;
    text-align: left;
    font-family: 'Oswald', sans-serif !important;
    font-size: 220%;
    font-size: 2.2vw;
    color: limegreen !important;
    padding-left: 2%;
}
.fz-horse-name{
    display: table-cell;
    width: 40%;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: 220%;
    font-size: 2.2vw;
    color: white;
    padding-left: 2%;
}

我在类里面检查的值是

sel.fav prints "Y" correctly inside the same div but the css color does not appear even I added "!important".

当我在 chrome 开发者模式下查看 HTML 片段时，它显示如下:

<div ng-class="sel.fav == 'Y' ? 'fz-horse-name-green' : 'fz-horse-name'" class="ng-binding fz-horse-name-green">TOYNEBEE : Y</div>

这意味着已经应用了正确的类，对吗？没有应用我的 css/没有根据条件正确更改文本颜色可能是什么问题？

我已经创建了一个示例 fiddle它工作正常。想知道为什么实际不起作用？

http://plnkr.co/edit/XhaxncmzzNFXmZryKkyr?p=preview

Answer 1

元素应该总是有fz-horse-name类

.fz-horse-name{
    display: table-cell;
    width: 40%;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: 220%;
    font-size: 2.2vw;
    color: white;
    padding-left: 2%;
}

fav 类应该只修改现有的类

.fz-horse-name.fav{
    color: limegreen;
}

然后如果条件为真，你可以添加fav类

<div class="fz-horse-name" ng-class="{'fav': (sel.fav == 'Y')}">
  {{sel.sel_name}} : {{sel.fav}}
</div>