3

我有一个由以下代码动态生成的表：

<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 次，值为'undefined'。

我试图用ng-class来实现它：

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

但随后根本不调用该方法。

请通过指出我当前代码中的错误或通过其他更好的方法来帮助我实现此功能。

感谢您，

4

1 回答 1

1

使用ng-class应该工作。

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

这是一个演示，我将所有的零都涂成红色。

更新

所以你的表格在一个指令中，而 cell-color 方法在控制器中。您可以将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>

更新的 Plunker

于 2014-06-11T14:25:10.517 回答