Nomathamsanqa Philiso Nomathamsanqa Philiso - 1 month ago 9
AngularJS Question

ng-style change background when condition is true

I want both the background of the div and the label text to change when power is more than 5. How can I achieve this in angular?

<div flex="5" layout="column" layout-align="center center center" class="default" ng-style="{'background-color':power1.value >5 ? 'red': 'black'}">
<label><center>VOLTAGE1</center></label>
</div>


I want to use angular
ng-style
and
ng-class
to change the background color of my div when a value exceed 5 and to also change the div label text below is sample of what i have it changes the color but how can change the text as well

Answer

Do you understand how to set the value for "power1" in your controller?

<div flex="5" layout="column" layout-align="center center center" class="default" ng-style="{'background-color': power1.value >5 ?  'red': 'black'}">
  <label>
   <center>{{power1.value >5 ?  'VOLTAGE HIGH': 'VOLTAGE1'}}</center>
  </label>
</div>