Question

我有一个动态生成的表，代码如下：

<tbody>
    <tr ng-repeat="row in tableType.data.rows track by $index">
        <td ng-repeat="col in row track by $index" class={{getUnitCountCellColor(col)}}>{{col}}</td>
    </tr>
</tbody>

迭代表的数据如下：

[["69123", 20, 20, 40, 0, 0, 0, 0, 20, 20, 20, 0, 20, 20, 0, 20],
 ["69121", 20, 20, 40, 0, 0, 0, 20, 20, 40, 20, 0, 20, 20, 0, 20],
 ["69124", 20, 20, 40, 0, 0, 0, 0, 0, 0, 20, 0, 20, 0, 0, 0],
 ["69221", 20, 20, 40, 20, 0, 20, 0, 0, 0, 20, 0, 20, 20, 20, 40]
]

如您所见，数据是嵌套数组。现在我试图根据其值设置每个单元格的颜色，方法是在父控制器范围中定义的方法 getUnitCountCellColor（）。

该方法只是获取值，并根据值作为字符串返回颜色类。（例如：危险，成功）

目前只有4次调用＆＃39; undefined＆＃39; 。

我尝试将 ng-class 实现为：

<td ng-repeat="col in row track by $index" ng-class="getUnitCountCellColor(col)">{{col}}</td>

但是根本没有调用该方法。

请帮我实现此功能，方法是指出当前代码中的错误或采用其他更好的方法。

感谢你，

Answer 1

使用ng-class应该有效。

<td ng-repeat="col in row track by $index" ng-class='getUnitCountCellColor(col)'>{{col}}</td>

Here's a demo我将所有零颜色设为红色。

更新

因此，您的表位于指令中，并且单元格颜色方法位于控制器中。您可以将getUnitCountCellColor函数传递给指令。

<count-table table-type='tableType' 
get-unit-count-cell-color='getUnitCountCellColor(col)'>
</count-table>

指令中的范围如下所示：

scope: {
  tableType:'=tableType',
  getUnitCountCellColor: '&'
}

指令模板如下所示：

<td ng-repeat="col in row track by $index" 
ng-class="getUnitCountCellColor({col: col})">{{col}}
</td>

Updated Plunker

AngularJS：根据单元格值在动态生成的表中更改单元格类

1 个答案:

更新