Total Pageviews

2014/06/27

[AngularJS] How do I conditionally apply CSS styles in AngularJS?

Requirement
If the amount value of the last column is less than zero, it should be showed by red color.

Solution
Step1. create a css file, and define a pair of key and value.


Step2. add ng-class in the input text, and give a condition: 
when the value of row.amtc are less than zero, then apply negative-number css
when the value of row.amtc are equal or greater than zero, then apply nothing.
1:  <td class="text-left border-right" style="width:150px">  
2:    <input id="amtc" name="amtc" size="30" maxlength="16"  
3:        data-ng-readonly="true" ng-class="row.amtc < 0 ? 'negative-number' : ''"  
4:        data-ng-model="row.amtc" style="width:150px;text-align:right"   
5:        title="{{row.amtcf}}"/>  
6:  </td>  

Demo

No comments: