Search code examples
angularjsng-classangular-ng-if

AngularJS : Use of ng-if and ng-class combination


I have a table like this :

<tr>
        <th scope="row">QUANTITÉ PRODUITE</th>
        <td>{{hoursValues[0][0][0]}}</td>
        <td>{{hoursValues[0][0][1]}}</td>
        <td>{{hoursValues[0][0][2]}}</td>
        <td>{{hoursValues[0][0][3]}}</td>
        <td>{{hoursValues[0][0][4]}}</td>
        <td>{{hoursValues[0][0][5]}}</td>
        <td>{{hoursValues[0][0][6]}}</td>
        <td>{{hoursValues[0][0][7]}}</td>
      </tr>
      <tr>
        <th scope="row">OBJECTIF QUANTITÉ</th>
        <td>{{hoursValues[0][2][0]}}</td>
        <td>{{hoursValues[0][2][1]}}</td>
        <td>{{hoursValues[0][2][2]}}</td>
        <td>{{hoursValues[0][2][3]}}</td>
        <td>{{hoursValues[0][2][4]}}</td>
        <td>{{hoursValues[0][2][5]}}</td>
        <td>{{hoursValues[0][2][6]}}</td>
        <td>{{hoursValues[0][2][7]}}</td>
      </tr>

I want to compare each column of a row with the other corresponding column, for example : hoursValues[0][0][0] && hoursValues[0][2][0] and according to this comparison, I want to apply the classes. I mean, if hoursValues[0][0][0] > hoursValues[0][2][0], I want to display the result in green else red.

Can anyone help me ? What should I write in my controller ?


Solution

  • in each td just do this

    <td ng-class="{true:'green', false:'red'}[hoursValues[0][0][0] > hoursValues[0][2][0]]">
    

    obvius just change each column with corresponding one. next td

    <td ng-class="{true:'green', false:'red'}[hoursValues[0][0][1] > hoursValues[0][2][1]]">