ngClass变量更改，但类保持不变

Question

我有以下内容->

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

当我第一次加载项目时，效果很好

但是，如果我编辑对象，则ngClass是update而不是class本身->

我的ngClass语法错误吗？

Answer 1

问题在于CSS类名称使用插值语法。

当此CSS类名称在模板中更改时，AngularJS不会将其更改为传递给ng-class的值，这就是为什么什么也没有发生的原因。

下面，我举了一个最小的示例来演示您所看到的行为，以及可能要使用的替代方法。

请注意，在替代方法中，CSS类名称是使用字符串串联创建的。

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>