angularjs - 通过表达式应用 ng-class 时如何正确组合字符串和变量？

Question

当我的应用程序初始化时，ng-class 的以下实现按预期工作，并且正确应用了类名称。但是，当 person.status 的值在运行时发生变化时，该类保持不变。

这是我的代码:

ng-class="{ 'avatar--{{ person.status }}' : myBool }"

如何更改格式，以便当 person.status 的值发生变化时，我的类也会发生变化？

示例:如果应用初始化时person.status设置为online，则应用的类为avatar--online 。但是，如果他们的状态在当前 session 中更改为离线，则该类仍保持avatar--online。

Answer 1

如果您可以找到使用“mybool”的方法，请尝试以下操作:

ng-class="'avatar--' + person.status"

工作代码片段:

var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope) {
  $scope.colors = ['blue', 'green'];
  $scope.color = $scope.colors[0];


});

.mydiv {
  width: 200px;
  height: 50px;
  background-color: grey;
}
.prefix--blue {
  background-color: blue;
}
.prefix--green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
  <select ng-model="color" ng-options="c for c in colors"></select>
  <div class="mydiv" ng-class="'prefix--'+color"></div>
</div>