javascript - How to change color of table row with if else statement in Angular? - Stack Overflow

admin管理员组

文章数量:1023050

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.

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.

• javascript
• angularjs

Share Improve this question Follow edited Dec 19, 2016 at 6:29 mask8 3,6382626 silver badges3434 bronze badges asked Dec 19, 2016 at 6:22 wobsorianowobsoriano 13.5k2525 gold badges104104 silver badges179179 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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.

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.

• javascript
• angularjs

Share Improve this question Follow edited Dec 19, 2016 at 6:29 mask8 3,6382626 silver badges3434 bronze badges asked Dec 19, 2016 at 6:22 wobsorianowobsoriano 13.5k2525 gold badges104104 silver badges179179 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

本文标签： javascriptHow to change color of table row with if else statement in AngularStack Overflow