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

Question

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

这是我的代码：

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

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

示例：如果在应用程序初始化时将person.status设置为online，则应用的class为avatar--online。但是，如果他们的状态在当前会话中更改为 offline，则 class 仍然是 avatar--online。

Answer 1

我没有尝试在 ng-class 的 class 名称部分使用 angular 表达式。但你可以通过这个实现实现你想要的

ng-class="{'avatar--online': person.status == 'online',
           'avatar--offline': person.status == 'offline'}"

基本上您可以在 ng-class 实现中设置两个条件。

希望对您有所帮助。

Answer 2

如果您能找到使用 '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>

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

How to correctly combine strings and variables when applying ng-class via an expression?

angularjs

ng-class