javascript - 如何在angularjs中设置多个条件样式

Question

我有一张 table 。我想根据其中一列的值设置不同的颜色。我已经设法使用 NgClass 设置了两种颜色。但是如何设置三个不同的条件。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<tr ng-class="{{project.total >= 0}} ? 'danger':'success'">

  <td>
    {{project.total}}

  </td>
</tr>

我要三个条件，如果总数小于35，颜色应该是红色，在35到70之间；黄色和70以上应该是绿色的。我怎么能用 Angular 来做到这一点。我对 Angular 很陌生。

Answer 1

您可以将对象作为 ng-class 的值传递。

来自documentation :

If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

你的对象将是这样的:

{
    'red': project.total < 35,
    'yellow': project.total >= 35 && project.total < 70,
    'green': project.total >= 70
}

因此，您的 html 是:

<tr ng-class="{ 'red': project.total < 35, 'yellow': project.total >= 35 && project.total < 70, 'green': project.total >= 70 }">

编辑:参见demo fiddle

但是，由于angular's digest mechanism您应该在模板中只保留简单的条件。产生的类计算可以在 Controller 中被驱逐出境，你将只有:

<tr ng-class="{{project.class}}">