Question

我有一张桌子。我想根据其中一列的值设置不同的颜色。我已经设法使用NgClass设置两种颜色。但是我怎样才能设定三种不同的条件。

＆＃13;

<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>

＆＃13;

＆＃13; 我想要三个条件，如果总数小于35，颜色应该是红色，在35到70之间;黄色和70以上应为绿色。我怎么能用角度做到这一点。我对角度很新。

Answer 1

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

来自documentation：

如果表达式求值为一个对象，则为每个键值对对于具有真值的对象，相应的键用作a 班级名称。

您的对象将是这样的：

{
    '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，您应该只在模板中保留简单的条件。结果类计算可以在控制器中逐出，你只能：

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

Answer 2

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

Answer 3

真的，你应该在控制器而不是HTML中做这个复杂的工作，但如果你坚持，你可以这样做：

<tr ng-class="project.total < 35 ? 'danger': (project.total < 71 ? 'partial' : 'success')">

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

3 个答案: