Search code examples
angularjsng-style

How to update ng-style in ng-repeat

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.

Solution

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