ngClass 变量更改但 class 保持不变

Question

我有以下 ->

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

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

但是，如果我编辑对象，ngClass 会更新，但 class 本身不会更新 ->

我的 ngClass 语法有误吗？

Answer 1

问题在于对 CSS class 名称使用内插语法。

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

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

请注意，在替代方案中，CSS class 名称是使用字符串连接创建的。

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 变量更改但 class 保持不变

ngClass variable change but class stay the same

angularjs

ng-class