CODEWITHSUNDEEP
cssangularjshtml-table
Satya Narayana
Satya Narayana

Reputation: 452

Change of table cell text color based on condition using ng-if and ng-style

I want to display the text in a table cell with alternate color combination depending on some condition as follows.

<tr ng-repeat="x in data">
<td>
<span ng-if="((x.time2 < x.time1) ||  (x.time2 < x.time3))" ng-style="color:red" {{x.val}}></span>
<span ng-if="((x.time2 === x.time1) &&  (x.time2 === x.time3)" ng-style="color:blue" {{x.val}}></span>
</td>
</tr>

But i am not getting the value displayed in red color though the x.time2 is less than x.time1. Sample time values are time1="2017-03-15 06:06:56", time2="2017-03-08 07:09:40" and time3="2017-03-08 07:09:40". All time values are in string format.

Upvotes: 1

Views: 5892

Answers (2)

aniran mohammadpour
aniran mohammadpour

Reputation: 161

Html:

 <td [ngClass]="((x.time2 < x.time1) ||  (x.time2 < x.time3))?'red': (x.time2 === x.time1) &&  (x.time2 === x.time3)?'green':'black'" >
            {{x.val}}
          </td>

CSS:

.red {
  color: red;
}

.green {
  color: green;
}

.black{
  color: black;
}

Upvotes: 0

Fab
Fab

Reputation: 4657

Try to change your code in this way:

    <table>
        <tbody>
            <tr ng-repeat="x in data">
            <td>
            <span ng-if="x.time2 < x.time1 || x.time2 < x.time3" ng-style="{color: 'red'}" >{{x.val}}</span>
            <span ng-if="x.time2 === x.time1 && x.time2 === x.time3" ng-style="{color: 'blue'}" >{{x.val}}</span>
            </td>
            </tr>
        </tbody>
    </table>

I also moved x.val inside span... I don't know if it was an error or not.

Upvotes: 1

Related Questions