Изменение фона определенного тд строки динамической таблицы с помощью AngularJS

Question

У меня есть эта динамическая таблица:

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

Я хочу изменить Td фон для конкретной строки, то строки, в которых «подсчитывать [$ индекса] 100)/(staffdispenser.dispenser.capacity.depthForSection staffdispenser.dispenser.capacity.nsections)»составляет менее 0,5

Это мое мнение:

Я хочу что-то вроде этого:

Answer 1

Вы когда-нибудь слышали о ngClass?

Вы можете добавить их к элементам, как этот

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

Хотя ваш условный не является синтаксически правильным. Что должно быть 100?

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

Answer 2

Альфонсо,

Рассмотрим ищет здесь для примера ngClass:

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

Вы можете применить это к элементу динамически применить класс.

Пример:

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

Я рекомендовал бы сделать функцию внутри контроллера для этого условного оператора вы хотите применить.

Answer 3

Во-первых, я думаю, что у вас слишком много логики в ваших выражениях Angular {{ }}, и вы должны разгрузить это контроллеру.

Вы сказали:

Я хочу изменить Td фон для конкретной строки, что строки, где «подсчитывать [$ указательный] 100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity. nsections)» менее 0,5

Так что ваш <td> должен выглядеть следующим образом:

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

И в контроллере:

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

Конечно, приспособиться к любой ценности/свойства/логика контроллер имеет.