ngClass变量但类保持不变[重复]

Question

这个问题在这里已有答案：

• Why mixing interpolation and expressions is bad practice 2回答

我有以下 - >

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

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

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

我的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/[email protected]/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>