So I have a simple ng-repeat and what I want to do is, if the p.product_quantity < 10, the background color will be red. Here is my code:
<tr ng-repeat="p in products" style="background-color: red">
<td>{{p.product_code}}</td>
<td>{{p.product_name}}</td>
<td>{{p.product_quantity}}</td>
</tr>
As you can see with that code, all of the rows will be red. How can I perform an if inside the <tr>? Any help would be much appreciated.
You can create a CSS class and use ngClass directive.
CSS
.red {background-color: red}
HTML
<tr ng-repeat="p in products" ng-class="{'red' : p.product_quantity < 10}">
<td>{{p.product_code}}</td>
<td>{{p.product_name}}</td>
<td>{{p.product_quantity}}</td>
</tr>
Also there is ng-style directive:
<tr ng-repeat="p in products" ng-style="{'background-color': p.product_quantity < 10 ? 'red' : 'white'}">
<td>{{p.product_code}}</td>
<td>{{p.product_name}}</td>
<td>{{p.product_quantity}}</td>
</tr>
You can use ng-class for that.
<tr ng-repeat="p in products" ng-class="{'red-bg': p.product_quantity < 10}">
<td>{{p.product_code}}</td>
<td>{{p.product_name}}</td>
<td>{{p.product_quantity}}</td>
</tr>
You can achieve this by using ng-class
By using ng-class your template
<tr ng-repeat="p in products" ng-class="bg-read: p.product_quantity < 10">
<td>{{p.product_code}}</td>
<td>{{p.product_name}}</td>
<td>{{p.product_quantity}}</td>
</tr>
your css
.bg-red {
background-color: red
}
You can find the documentation of ng-class here and samples here
