Change the background of a specific td row of a dynamic table using AngularJS

Question

I have this dynamic table:

<table id="thetable">


            <tr> 

                <th class="th2">&nbsp;&nbsp;Id&nbsp;&nbsp;</th>
                <th class="th2">&nbsp;&nbsp;Attivo&nbsp;&nbsp;</th>
                <th class="th2">&nbsp;&nbsp;Capacità&nbsp;&nbsp;</th> 
                <th class="th2">&nbsp;&nbsp;Zona&nbsp;&nbsp;</th>
                <th class="th2">&nbsp;&nbsp;Stato&nbsp;&nbsp;</th>

         </tr> 

            <tr style="cursor:pointer"  ng-repeat="staffdispenser in staffdispensers">  

        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td> 
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>  

        </tr>  

        </table>

I want to change td background for a specific row, that rows where "count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" is less than 0.5

This is my view:

I want something like that:

Answer 1

Have you ever heard of ngClass?

You can add it to your elements like this

<td ng-class="{'yellow-background': (count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections) < 0.5 }"></td>

Although your conditional is not syntactically valid. What is the 100 supposed to be?

count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)

Answer 2

Alfonso,

Consider looking here for an example of ngClass:

https://docs.angularjs.org/api/ng/directive/ngClass

You can apply this to the element to dynamically apply the class.

Example:

            <tr style="cursor:pointer"  ng-repeat="staffdispenser in staffdispensers" ng-class="{'special-row-color': staffdispenser.isMyCondition == true}">  

        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td> 
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>  

        </tr>  

I would recommend making a function inside the controller for that conditional you want to apply.

Answer 3

First, I think you have way too much logic in your Angular {{ }} expressions, and you should offload that to a controller.

You said:

I want to change td background for a specific row, that rows where "count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" is less than 0.5

So your <td> should look like this:

<td ng-class="getClass($index)">{{ myLogicHere }}</td>

And in your controller:

$scope.getClass = function(index) {
  var value = count[index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections;
  return value < .5 ? 'highlight-class' : '';
};

Of course, adjust to whatever values/properties/logic your controller has.