Employing ng-style for establishing background when the value does not align

Question

Greetings all! I am using ng-repeat to create a list of items within a ul element.

Within the json data, there is a specific value that I want to highlight if it does not match a predefined string. Here's what I have so far:

ng-style="{'background-color':(json.string !== 'NO_MATCH' ? 'yellow')}

Below is the complete code for the ng-repeat section:

<li ng-repeat="json in json" ng-style="{'background-color': (json.string !== 'NO_MATCH' ? 'yellow')}>{{ json.title }} - {{ json.display }}</li>

I seem to be encountering an issue with this setup. Can anyone help me figure out where I might be making a mistake?

Answer 1

Answer №1

Instead of using ngStyle, it is recommended to use ngClass. This is because ngStyle adds inline styles to the element.

Here's an example in CSS:

.yellow {
  background-color: yellow;
}

And here's how you can use it in HTML:

<li ng-repeat="json in json" ng-class="{'yellow': json.string !== 'NO_MATCH'}">{{ json.title }} - {{ json.display }}</li>

Answer 2

Instead of using ngStyle, it is recommended to use ngClass. This is because ngStyle adds inline styles to the element.

Here's an example in CSS:

.yellow {
  background-color: yellow;
}

And here's how you can use it in HTML:

<li ng-repeat="json in json" ng-class="{'yellow': json.string !== 'NO_MATCH'}">{{ json.title }} - {{ json.display }}</li>

Answer 3

Give this a shot?

ng-style="{'background-color: yellow;': json.string!=='NO_MATCH'}"

Answer 4

Give this a shot?

ng-style="{'background-color: yellow;': json.string!=='NO_MATCH'}"