ngClass variable change but class stay the same

Question

I have the following ->

<li ng-repeat="statusBox in $ctrl.statusListForDisp"
    ng-class="[{'active': statusBox.isActive}, 'label-status-{{statusBox.color}}']"
    layout="column" layout-align="center start">

it work great when I load the item for the first time,

but, if I edit the object, the ngClass is update but not the class itself ->

is my ngClass syntax wrong ?

score 1 · Accepted Answer · answered Apr 11 '19 at 04:13

The problem lies with using interpolated syntax for the CSS class name.

When this CSS class name changes in the template, AngularJS doesn't consider it a change to the value being passed to ng-class, which is why nothing is happening.

Below I've made a minimal example demonstrating the behaviour you're seeing and an alternative which is what you probably want.

Notice that in the alternative, the CSS class name is created using string concatenation.

angular
  .module('app', [])
  .controller('ctrl', function () {
    this.statusListForDisp = [
      { color: 'red' },
    ];
    this.makeGreen = function (statusBox) {
      statusBox.color = 'green';
    };
  });

.label-status-green { color: green; }
.label-status-red { color: red; }

<script src="https://unpkg.com/angular@1.7.8/angular.min.js"></script>
<div
  ng-app="app"
  ng-controller="ctrl as $ctrl">
  <ul>
    <li
      ng-repeat="statusBox in $ctrl.statusListForDisp"
      ng-class="['label-status-{{statusBox.color}}']"
      ng-click="$ctrl.makeGreen(statusBox)">click me: {{ statusBox.color }}</li>
  </ul>
  <ul>
    <li
      ng-repeat="statusBox in $ctrl.statusListForDisp"
      ng-class="['label-status-' + statusBox.color]"
      ng-click="$ctrl.makeGreen(statusBox)">click me: {{ statusBox.color }}</li>
  </ul>
</div>

ngClass variable change but class stay the same

1 Answers1