CODEWITHSUNDEEP
javascriptangularjs
wobsoriano
wobsoriano

Reputation: 13434

How to change color of table row with if else statement in Angular?

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.

Upvotes: 0

Views: 2966

Answers (4)

Nitheesh
Nitheesh

Reputation: 19986

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

Upvotes: 1

Sai
Sai

Reputation: 2658

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>

Upvotes: 1

Slava Utesinov
Slava Utesinov

Reputation: 13488

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>

Upvotes: 2

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 3

Related Questions