javascript - AngularJS:根据单元格值更改动态生成的表中的单元格类

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

如您所见，数据是一个嵌套数组。现在，我尝试通过调用父 Controller 范围中定义的方法 getUnitCountCellColor() 来根据其值设置每个单元格的颜色。

该方法只是获取值并根据该值将颜色类作为字符串返回。 (例如:危险、成功)

目前它只被调用了 4 次，值为 'undefined'。

我尝试用 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我将所有的零都涂成红色。

更新

所以你的表格在指令中，单元格颜色方法在 Controller 中。您可以将 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