Css 根据不同的值更改glyphicon的颜色

我使用angularjs和ng repeat循环并在表中显示细节。 在最后一列中，我想用某种颜色显示glyphicon“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>

• 红色的
  • 年龄超过30岁，国家“蒙古族”和大陆1
• 蓝色的
  • 年龄超过30岁，国家和大陆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>

---

您在ng class属性的末尾缺少一个}，它应该是：

ng class=“{'color-red'：ps.age}

---

此处的详细信息：

您在ng class属性的末尾缺少一个}，它应该是：

ng class=“{'color-red'：ps.age}

---

此处的更多信息：

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

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

它实际上进一步扩展：

{'color-red'：ps.age>30&&ps.country=='GER'&&ps.continent==1}

正如@AlekseySolovey所说，我有更多的条件。有这么多条件吗？更容易的是直接在控制器内部创建一个函数，正如Diogamachado回答的那样：它实际上进一步扩展：

{'color-red'：ps.age>30&&ps.country=='GER'&&ps.continent==1}

正如@AlekseySolovey所说，我有更多的条件。有这么多条件吗？更容易的是直接在控制器内部创建函数，正如Diogamachado回答的那样：我认为这是一个稍微错误的语法，应该是

$scope.getClass=function（ps）{…

我认为这是一个稍微错误的语法，应该是

$scope.getClass=function（ps）{…