Tengo esta tabla dinámica:

<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>

Quiero cambiar el fondo de td para una fila específica, esas filas donde "count [$ index] 100) / (staffdispenser.dispenser.capacity.depthForSection staffdispenser.dispenser.capacity.nsections)" es menor que 0.5 0.5

Esta es mi opinión:

enter image description here

Quiero algo asi:

enter image description here

0
Alfonso Silvestri 13 ene. 2017 a las 22:09

3 respuestas

La mejor respuesta

¿Alguna vez has oído hablar de ngClass?

Puedes agregarlo a tus elementos así

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

Aunque su condicional no es sintácticamente válido. ¿Qué se supone que es 100?

count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)
2
Pop-A-Stash 13 ene. 2017 a las 19:14

Alfonso

Considere buscar aquí un ejemplo de ngClass:

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

Puede aplicar esto al elemento para aplicar dinámicamente la clase.

Ejemplo:

            <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>  

Recomendaría hacer una función dentro del controlador para ese condicional que desea aplicar.

1
chrispy 13 ene. 2017 a las 19:16

Primero, creo que tienes demasiada lógica en tus expresiones angulares {{ }}, y deberías descargar eso a un controlador.

Tu dijiste:

Quiero cambiar el fondo de td para una fila específica, esas filas donde "count [$ index] 100) / (staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" es menor que 0.5

Entonces su <td> debería verse así:

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

Y en tu controlador:

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

Por supuesto, ajústese a los valores / propiedades / lógica que tenga su controlador.

1
JohnnyCoder 13 ene. 2017 a las 19:19