I am facing an issue with updating the text color inside a div tag based on values from an array within an ng-repeat. While the value is correctly set during debugging, the color does not display properly.
<div ng-class="sel.fav == 'Y' ? 'fz-horse-name-green' : 'fz-horse-name'">{{sel.sel_name}} : {{sel.fav}}</div>
The CSS classes I am using are:
.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%;
}
I have verified that the value I am checking inside the class is
sel.fav correctly prints "Y" within the same div, however, the CSS color does not appear even though I added "!important".
When inspecting the HTML snippet in Chrome developer mode, it shows as follows:
<div ng-class="sel.fav == 'Y' ? 'fz-horse-name-green' : 'fz-horse-name'" class="ng-binding fz-horse-name-green">TOYNEBEE : Y</div>
This indicates that the correct class is being applied, so what could be causing the issue of not applying my CSS / not changing the text color correctly based on the condition?
I have provided a sample fiddle where it works fine. I am puzzled why it is not working in the actual scenario?