根据不同的值更改字形图标的颜色答案

【问题标题】：Change the color of a glyphicon, based on different values根据不同的值更改字形图标的颜色
【发布时间】：2018-07-22 16:37:18
【问题描述】：

我正在使用 angularjs，我使用 ng-repeat 循环并在表格中显示详细信息。在最后一列中，我想以某种颜色显示字形“glyphicon glyphicon-stop”。

<tr ng-repeat="ps in $ctrl.personLst">
<td>{{ ps.id}}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.age }}</td>
<td>{{ ps.country }}</td>
<td>{{ ps.continent }}</td>
<td> //TODO <td>

.color-green {
  color: green;
}

.color-blue {
  color: yellow;
}

.color-red {
  color: red;
}

红色
- 30 岁以上，国家 'GER' 和大陆 1
蓝色
- 30 岁以下，国家 'RS' 和大陆 1
绿色
- 10 岁以下，国家 'TS' 和大陆 3

我怎样才能做到这一点？这是我尝试的最后一件事，没有任何显示：

<td><span class="glyphicon glyphicon-stop" ng-class="{'color-red': ps.age > 30 && ps.country === 'GER' && ps.continent === 1}" ></span></td>

【问题讨论】：

标签： css angularjs

【解决方案1】：

您可以将此逻辑分离到控制器内部的一个函数中：

$scope.getClass(ps){
   if (ps.age > 30 && ps.country === 'GER' && ps.continent === 1){
     return 'color-red';
   } 
}

在视图中，您调用：

<td><span class="glyphicon glyphicon-stop" ng-class="getClass(ps)" ></span></td>

【讨论】：

我认为这是一个稍微错误的语法，应该是$scope.getClass = function(ps){...

【解决方案2】：

您的 ng-class 属性末尾缺少一个 }，它应该是：ng-class="{'color-red': ps.age }

【讨论】：

它实际上进一步扩展：{'color-red': ps.age > 30 && ps.country === 'GER' && ps.continent === 1}
正如@AlekseySolovey 所说，我有更多条件。有可能有这么多条件吗？
更容易的是直接在控制器内部创建一个函数，正如 diogomachado 回答的那样：stackoverflow.com/a/48748037/9334064