[英]AngularJS: Change cell class in a dynamically generated table based on cell value
我有一個動態生成的表,代碼如下:
<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>
但是根本沒有調用該方法。
請通過指出當前代碼中的錯誤或通過其他更好的方法幫助我實現此功能。
感謝您,
使用ng-class
應該有效。
<td ng-repeat="col in row track by $index" ng-class='getUnitCountCellColor(col)'>{{col}}</td>
這是一個演示 ,我將所有零顏色變為紅色。
因此,您的表位於指令中,並且單元格顏色方法位於控制器中。 您可以將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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.