angularjs - 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 是更新的，但不是类本身 ->

我的 ngClass 语法错了吗？

标签： angularjsng-class

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>