Apply Background color for specific in angular

Question

I have one angular table.

<tr ng-repeat="data in userList">
  <td>{{$index+1}}</td>
  <td>{{data.name }}</td>
  <td>{{data.age}}</td>
  <td>{{data.dept}}</td>
  <td>{{data.appDate }}</td>
  <td>{{data.joinedDate}}</td>
</tr>

Here when joinedDate>appDate ,for that particular row I need to add background color with dottedlines.
I did this

<tr ng-repeat="data in userList" ng-if="data.appDate>=delivery.joinedDate" ng-style="{'background-color': '#ffd6d6','border':'dashed 3px #9e0b0f'}">
  <td>{{$index+1}}</td>
  <td>{{data.name }}</td>
  <td>{{data.age}}</td>
  <td>{{data.dept}}</td>
  <td>{{data.appDate }}</td>
  <td>{{data.joinedDate}}</td>
</tr>
<tr ng-repeat="data in userList">
  <td>{{$index+1}}</td>
  <td>{{data.name }}</td>
  <td>{{data.age}}</td>
  <td>{{data.dept}}</td>
  <td>{{data.appDate }}</td>
  <td>{{data.joinedDate}}</td>
</tr>

But rows are displaying two times.What is the mistake?Any suggestion?

Why not just style the ``'s? – TryingToImprove Jul 21 '17 at 06:40 — TryingToImprove, Jul 21 '17 at 06:40
I need to apply background color for` `. – krish Jul 21 '17 at 06:42 — krish, Jul 21 '17 at 06:42

score 1 · Accepted Answer · answered Jul 21 '17 at 06:42

Change your 2nd tr tag like this:

<tr ng-repeat="data in userList" ng-if="data.appDate>=delivery.joinedDate" ng-style="{'background-color': 'red'}">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate |}}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>
<tr ng-repeat="data in userList" ng-if="!(data.appDate>=delivery.joinedDate)">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate |}}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>

I don't think it should work. Can you post working image here — Waseem Ahmad Naeem, Jul 21 '17 at 10:29

Apply Background color for specific in angular

1 Answers1