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

当我在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>

ng-class样式不适用

1 个答案: