CSS根据angularjs的条件来改变特定的颜色

CSS to turn a certain color depending on angularjs condition

本文关键字：颜色 改变 条件 根据 angularjs CSS      更新时间：2023-09-26

我有以下html:

 <div>
      <i class="glyphicon glyphicon-envelope" 
         style="margin-top: -50px; cursor:pointer; color: #1F45FC" 
         ng-click="createComment(set_id)">
      </i> Route 
      <center>
           <span class="route_no">{{set_id}}</span> 
      </center>
 </div>
 <div>
      <center>Status: {{set.total_one}}/{{set.total_two}}</center>
 </div>

这在ng-repeat="set in settings" 内

我想根据javascript控制器内的条件更改<i class="glyphicon glyphicon-envelope">的颜色。

我很难将特定图标绑定到索引，这样angularjs就知道哪些图标要更改颜色。

当条件为true时，您可以使用ng-style来分配类，而不是修复类。

如果您的条件是set的布尔flag属性，并且当它为true时，您想添加一个名为red的类，那么您可以这样做：

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="{ red: set.flag }">

或者，您可以使用一个计算为类名的表达式，三元运算符在这里很方便。例如，如果您想要前3个red，其余的blue:

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="$index < 3 ? 'red' : 'blue'">

您可以在控制器中定义一个函数，该函数将根据条件返回所需的颜色。看看这个JSFiddle

这是一个功能，您可以在其中应用必要的逻辑：

this.getColor = function (cust) 
{ 
    if (cust.total_one > 400) return 'red';
    if (cust.total_one > 300) return '#FF4700';
    if (cust.total_one > 200) return '#FF9900';
    if (cust.total_one > 100) return 'yellow';
};
相关文章：