Search code examples
angularjsangularjs-ng-repeatng-class

ng-repeat value as ng-class for last <td>

<tr ng-repeat="row in rows">
    <td ng-class="{row[th]:$last}" ng-repeat="th in ths">{{row[th]}}</td>
</tr>

for the code above, i'm trying to use the row[th] value as the name of the class in ng-class for the last td element only. I can use an actual class name just fine, but not the referenced value from row[th]. Any ideas how to accomplish this?

PS: the row[th] will return a status (e.g. Red, Green, etc.), which is also a css class name i'm using.

jsFiddle here

in the fiddle above, if i replace row[th] with Green in ng-class, that works!

the solution below by @tasseKATT works fine, however now i seem to have another issue. i'm not able to include another static-named class. Fiddle link here. Any help much appreciated.

Solution

  • After much troubleshooting, I came up with the following solution (extending @tasseKATT's original answer:

    <td ng-class="{true: [row[th], 'staticCSSClassName']}[$last]" ng-repeat="th in ths">{{row[th]}}</td>

    The code above adds two classes to the last <td> in ng-repeat:

    1. value contained in row[th]
    2. staticCSSClassName

    So, basically, the value part in the Object can be an array of strings, which can include referenced values from ng-repeat as well as static class names.

    working jsfiddle here

    Hope someone finds this useful.