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背景，即“count [$ index] 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背景，即行的位置＆＃34;计数[$指数] 100）/（staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections）＆＃34; 小于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' : '';
};

当然，请调整控制器所具有的任何值/属性/逻辑。

使用AngularJS更改动态表的特定td行的背景

3 个答案: