ng-class 风格不适用答案

【问题标题】：ng-class style does not applyng-class 风格不适用
【发布时间】：2015-04-10 20:01:39
【问题描述】：

我正在根据 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 在同一个 div 中正确打印“Y”，但即使我添加了“！important”，css 颜色也不会出现。

当我在 chrome 开发者模式下查看 HTML sn-p 时，显示如下：

<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

【问题讨论】：

快速查看您的代码似乎很好，所以其他地方肯定有问题。做一个工作小提琴总是好的
您可以使用开发者工具并检查your div 并找出影响其颜色的其他因素。
请创建复制问题的演示
我已经提交了一个编辑（将plnkr.co/edit/XhaxncmzzNFXmZryKkyr?p=preview 添加为 plnkr）...这个 plunkr 可以工作...所以问题不在于您显示的代码。
这可能是一个愚蠢的评论，但是您确定 css 文件已正确加载，可能是您已完成更新但浏览器仍使用缓存版本？

标签： css angularjs

【解决方案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>

【讨论】：

这不是一个有效的答案，而只是建议使用其他样式/格式。
不确定我的代码出了什么问题，但这工作正常。谢谢Vinko