How to update ng-style in ng-repeat

Question

I have a ng-style inside of ng-repeat. The problem is the ng-style value is updated after a change but the actual style does not change.

<tr class="row" ng-repeat="(hourIndex, hour) in day track by $index">
  <td class="cell"
      ng-style="{ 'background-color': '{{ switchBackgroundColor(hour) }}' }">
    {{ hour }}%
  </td>
</tr>

As stated above once the day and in turn hour changes, the ng-style is updated. This update is not reflected in the style.

score 2 · Accepted Answer · answered Dec 02 '16 at 13:28

No need to use {{...}} for your css, it's already within angular since you're using ng-style.

<tr class="row" ng-repeat="(hourIndex, hour) in day track by $index">
    <td class="cell" ng-style="{ 'background-color': switchBackgroundColor(hour) }">
        {{ hour }}%
    </td>
</tr>

How to update ng-style in ng-repeat

1 Answers1